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

perf: alertList性能优化

Browse Source
This commit is contained in:
chenjinsong
2020-09-28 16:27:03 +08:00
parent ffbb33e7af
commit 4d1d89cd84
5 changed files with 228 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
<template> <template>
<span> <div class="alert-label" :style="calcPosition(that.position)">
<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>
@@ -58,7 +58,7 @@
<div class="alert-label-title">Administrator</div> <div class="alert-label-title">Administrator</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.principal:''}}</div> <div class="alert-label-value">{{alertLabelData?alertLabelData.principal:''}}</div>
</div> </div>
</div> </div>
<div class="alert-label-info" v-if="type==='module'" v-loading="loading"> <div class="alert-label-info" v-if="type==='module'" v-loading="loading">
<div class="alert-label-box"> <div class="alert-label-box">
@@ -93,7 +93,7 @@
<div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div> <div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
</div> </div>
</div> </div>
</span> </div>
</template> </template>
<script> <script>
@@ -102,53 +102,65 @@
props:{ props:{
id:{}, id:{},
type:{}, type:{},
labelLoading:{}, //labelLoading:{},
that:{} that:{}
}, },
watch:{ /*watch:{
labelLoading(){ labelLoading: {
if(this.type==='asset'){ immediate: true,
this.$get('/asset/info?id='+this.id).then((res)=>{ handler(n) {
if(res.msg==='success'){ if(this.type==='asset'){
this.loading=false; this.$get('/asset/info?id='+this.id).then((res)=>{
this.alertLabelData=res.data.Basic; if(res.msg==='success'){
} else{ this.loading=false;
this.$message.error(res.msg); this.alertLabelData=res.data.Basic;
} } else{
}) this.$message.error(res.msg);
} }
if(this.type==='project'){ })
this.$get('/project/info?id='+this.id).then((res)=>{ }
if(res.msg==='success'){ if(this.type==='project'){
this.loading=false; this.$get('/project/info?id='+this.id).then((res)=>{
this.alertLabelData=res.data.basic; if(res.msg==='success'){
} else{ this.loading=false;
this.$message.error(res.msg); this.alertLabelData=res.data.basic;
} } else{
}) this.$message.error(res.msg);
} }
if(this.type==='module'){ })
this.$get('/module?id='+this.id).then((res)=>{ }
if(res.msg==='success'){ if(this.type==='module'){
this.loading=false; this.$get('/module?id='+this.id).then((res)=>{
this.alertLabelData=res.data.list[0]; if(res.msg==='success'){
} else{ this.loading=false;
this.$message.error(res.msg); this.alertLabelData=res.data.list[0];
} } else{
}) this.$message.error(res.msg);
}
})
}
} }
} }
}, },*/
data() { data() {
return { return {
alertLabelData:null, alertLabelData:null,
loading:true loading: true
} }
}, },
components:{ components:{
}, },
computed: {
calcPosition() {
return function(position) {
return {
left: `${position.left + position.width + 20}px`,
top: `${position.top - 20}px`,
}
}
}
},
methods:{ methods:{
alertActiveStr(){ alertActiveStr(){
return vm.$t('overall.active'); return vm.$t('overall.active');
@@ -162,13 +174,66 @@
}, },
}, },
mounted(){ mounted(){
if(this.type==='asset'){
this.$get('/asset/info?id='+this.id).then((res)=>{
if(res.msg==='success'){
this.loading=false;
this.alertLabelData=res.data.Basic;
} else{
this.$message.error(res.msg);
}
})
}
if(this.type==='project'){
this.$get('/project/info?id='+this.id).then((res)=>{
if(res.msg==='success'){
this.loading=false;
this.alertLabelData=res.data.basic;
} else{
this.$message.error(res.msg);
}
})
}
if(this.type==='module'){
this.$get('/module?id='+this.id).then((res)=>{
if(res.msg==='success'){
this.loading=false;
this.alertLabelData=res.data.list[0];
} else{
this.$message.error(res.msg);
}
})
}
}, },
} }
</script> </script>
<style scoped> <style scoped>
.alert-label {
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 {
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-label-info{ .alert-label-info{
border: 1px solid #ebeef5; border: 1px solid #ebeef5;
border-bottom: none; border-bottom: none;

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

@@ -59,14 +59,12 @@
> >
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<template v-if="item.prop == 'alertRule'"> <template v-if="item.prop == 'alertRule'">
<span class="too-long-split pointer" v-if="scope.row[item.prop].alertName" @mouseover="alertMessagehover(scope.row,scope.$index)"> <div class="too-long-split pointer"v-if="scope.row.alertRule.alertName" >
<el-tooltip <span @mouseenter="alertMessagehover(scope.row.alertRule, true, $event)" @mouseleave="alertMessagehover(scope.row.alertRule, false)">
:placement="scope.$index==0?'right-start':(scope.$index==tableData.length-1?'right-end':'right')" <span>{{scope.row.alertRule.alertName}}</span>
effect="light"> </span>
<alertRuleInfo slot="content" :id="scope.row.alertRule.id" :messageLoad="scope.row.loading"></alertRuleInfo> <alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :that="scope.row.alertRule"></alertRuleInfo>
<span>{{scope.row[item.prop].alertName}}</span> </div>
</el-tooltip>
</span>
<template v-else>-</template> <template v-else>-</template>
</template> </template>
<template v-else-if="item.prop == 'summary'"> <template v-else-if="item.prop == 'summary'">
@@ -78,12 +76,31 @@
<span v-else>-</span> <span v-else>-</span>
</template> </template>
<span v-else-if="item.prop == 'severity'"> <span v-else-if="item.prop == 'severity'">
<span v-if="scope.row[item.prop] == 'high'"><i class="nz-icon nz-icon-arrow-up"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}</span> <span v-if="scope.row[item.prop] == 'high'"><i class="nz-icon nz-icon-arrow-up"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}</span>
<span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{returnSeverityLabel(scope.row[item.prop])}}</span> <span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{returnSeverityLabel(scope.row[item.prop])}}</span>
<span v-if="scope.row[item.prop] == 'low'"><i class="nz-icon nz-icon-arrow-down"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}</span> <span v-if="scope.row[item.prop] == 'low'"><i class="nz-icon nz-icon-arrow-down"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}</span>
</span> </span>
<template v-else-if="item.prop == 'labels'" class="labels"> <template v-else-if="item.prop == 'labels'" class="labels">
<el-tooltip <div 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)">
<nz-alert-tag
:label="item.label" :type="tagType(item.label)" style="margin: 5px 0 5px 5px;"
:cursor-point="tagType(item.label) == 'info' ? false : true"
:key="item.label"
v-if="item.label != 'alertname' && item.label != 'severity'"
>
{{item.value}}
</nz-alert-tag>
</span>
<alertLabel
v-if="(item.label === 'asset' ||item.label === 'module' || item.label === 'project') && scope.row[item.label] && scope.row[item.label].loading"
:id="scope.row[item.label].id"
:that="scope.row[item.label]"
:type="item.label"
></alertLabel>
</div>
<!--<el-tooltip
v-for="(item,i) in labelsSort(scope.row.labels)" v-for="(item,i) in labelsSort(scope.row.labels)"
:placement="scope.$index==0?'right-start':(scope.$index==tableData.length-1?'right-end':'right')" :placement="scope.$index==0?'right-start':(scope.$index==tableData.length-1?'right-end':'right')"
effect="light" effect="light"
@@ -107,7 +124,8 @@
{{item.value}} {{item.value}}
</nz-alert-tag> </nz-alert-tag>
</span> </span>
</el-tooltip> </el-tooltip>-->
</template> </template>
<div v-else-if="item.prop == 'state'"> <div v-else-if="item.prop == 'state'">
<span class=""> <span class="">
@@ -755,17 +773,28 @@
} }
}, },
// alertNmae鼠标划入 // alertNmae鼠标划入
alertMessagehover(item,index){ alertMessagehover(item, loading, e) {
item.loading=true; if (e) {
this.$set(this.tableData,index,item);// 调用父组件 let dom = e.currentTarget;
let position = dom.getBoundingClientRect();
this.$set(item, "position", position);
}
this.$set(item, "loading", loading);
//item.loading = true;
//this.$set(this.tableData,index,item);// 调用父组件
}, },
// label 鼠标划入 // label 鼠标划入
labelHover(item,index,type){ labelHover(item, type, loading, e){
if(this.labelToolTipDis(type)){ if(this.labelToolTipDis(type)){
return return;
} }
item[type].loading=true; if (e) {
this.$set(this.tableData,index,item);// 调用父组件 let dom = e.currentTarget;
let position = dom.getBoundingClientRect();
this.$set(item[type], "position", position);
}
this.$set(item[type], "loading", loading);
//this.$set(this.tableData,index,item);// 调用父组件
}, },
// Severity Label // Severity Label
returnSeverityLabel(key){ returnSeverityLabel(key){

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

@@ -1,5 +1,5 @@
<template> <template>
<div class="alert-rule-info" v-loading="loading"> <div class="alert-rule-info" :style="calcPosition(that.position)" v-loading="loading">
<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?alertRuleData.id:''}}</div> <div class="alert-rule-value">{{alertRuleData?alertRuleData.id:''}}</div>
@@ -30,8 +30,9 @@
props:{ props:{
id:{}, id:{},
messageLoad:{}, messageLoad:{},
that: {}
}, },
watch:{ /*watch:{
messageLoad:{ messageLoad:{
handler:function(){ handler:function(){
this.$get('/alert/rule?id='+this.id).then((res)=>{ this.$get('/alert/rule?id='+this.id).then((res)=>{
@@ -45,7 +46,7 @@
}, },
deep:true deep:true
} }
}, },*/
data() { data() {
return { return {
loading:true, loading:true,
@@ -55,34 +56,73 @@
components:{ components:{
}, },
computed: {
calcPosition() {
return function(position) {
return {
left: `${position.left + position.width + 20}px`,
top: `${position.top + 20}px`,
}
}
}
},
methods:{ methods:{
formatThreshold(value,unit) { formatThreshold(value,unit) {
let unitMethod = chartDataFormat.getUnit(unit); let unitMethod = chartDataFormat.getUnit(unit);
if (unitMethod&&value) { if (unitMethod&&value) {
return unitMethod.compute(value, null, 2); return unitMethod.compute(value, null, 2);
} else { } else {
return value return value;
} }
}, },
}, },
mounted(){ mounted(){
this.$get('/alert/rule?id='+this.id).then((res)=>{
if(res.msg === 'success') {
this.loading = false;
this.alertRuleData=res.data.list[0];
} else{
this.$message.error(res.msg);
}
});
}, },
} }
</script> </script>
<style scoped> <style scoped>
.alert-rule-info::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: calc(50% - 6px);
left: 0;
transform: translate(-100%, -100%);
}
.alert-rule-info{ .alert-rule-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;
position: fixed;
background-color: white;
z-index: 3000;
padding: 10px;
transform: translateY(-50%);
overflow-wrap: break-word;
border-radius: 4px;
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
} }
.alert-rule-box{ .alert-rule-box{
display: flex; display: flex;
justify-content:space-between;
border-bottom: 1px solid #ebeef5; border-bottom: 1px solid #ebeef5;
} }
.alert-rule-title{ .alert-rule-title{
@@ -94,7 +134,6 @@
} }
.alert-rule-value{ .alert-rule-value{
text-align: left; text-align: left;
width: 180px;
color: #1a1a1a; color: #1a1a1a;
padding: 0 3px 0 13px; padding: 0 3px 0 13px;
} }

46
nezha-fronted/src/components/page/alert/list.vue
View File

@@ -485,28 +485,30 @@
this.tools.loading = false; this.tools.loading = false;
if (response.code == 200) { if (response.code == 200) {
this.tableData = response.data.list; this.tableData = response.data.list;
this.tableData.forEach((item) => { this.$nextTick(() => {
item.labels = JSON.parse(item.labels); this.tableData.forEach((item) => {
let paramStr = JSON.stringify(this.promQueryParamConvert(item)); item.labels = JSON.parse(item.labels);
this.$get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")).then(response2 => { let paramStr = JSON.stringify(this.promQueryParamConvert(item));
let current = []; this.$get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")).then(response2 => {
if (response2.data && response2.data.result && response2.data.result.length > 0) { let current = [];
current = response2.data.result[0].value.map((item, i) => { if (response2.data && response2.data.result && response2.data.result.length > 0) {
if (i == 0) { current = response2.data.result[0].value.map((item, i) => {
return bus.computeTimezone(item); if (i == 0) {
} else { return bus.computeTimezone(item);
return parseFloat(item).toFixed(2); } else {
} return parseFloat(item).toFixed(2);
}); }
}else{ });
current=[null,null] }else{
} current=[null,null]
this.requestIndex+=1; }
item.current=current; this.requestIndex+=1;
if(this.requestIndex===this.tableData.length){ item.current=current;
this.$set(item, "current", current); if(this.requestIndex===this.tableData.length){
this.requestIndex=0; this.$set(item, "current", current);
} this.requestIndex=0;
}
});
}); });
}); });
this.deleteBox.ids=''; this.deleteBox.ids='';

5
nezha-fronted/src/components/page/dashboard/overview/overview2.vue
View File

@@ -112,7 +112,7 @@
<div class="content-col-box"> <div class="content-col-box">
<div class="content-col-title">{{$t("dashboard.overview.dataCenter.dataCenter")}}</div> <div class="content-col-title">{{$t("dashboard.overview.dataCenter.dataCenter")}}</div>
<div class="content-col-content"> <div class="content-col-content">
<chart-box chart-type="map" :tooltip-formatter="mapTooltipFormatter" :map="map" ref="dataCenterMap" @is-loading="(isLoading)=>{this.mapLoading = isLoading}"></chart-box> <chart-box chart-type="map" :tooltip-formatter="mapTooltipFormatter" :map="map" ref="dataCenterMap" @is-loading="(isLoading)=>{this.mapLoading = isLoading}"></chart-box>
<div class="right-bottom-zoom"> <div class="right-bottom-zoom">
<div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(1)"><span><i class="nz-icon nz-icon-enlarge"></i></span></div> <div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(1)"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
<div class="zoom-option" @click="zoomMap(-1)"><span><i class="nz-icon nz-icon-narrow"></i></span></div> <div class="zoom-option" @click="zoomMap(-1)"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
@@ -686,7 +686,7 @@
geoJson: {geoJson: world.worldData} geoJson: {geoJson: world.worldData}
}; };
setTimeout(()=>{this.queryDataCenterMapData();this.$refs.dataCenterMap.endLoading();},200) setTimeout(()=>{this.queryDataCenterMapData();},1000)
}, },
queryDataCenterMapData() { queryDataCenterMapData() {
let language=localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en'; let language=localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en';
@@ -767,6 +767,7 @@
data:seriesDatas data:seriesDatas
}] }]
this.$refs.dataCenterMap.setSeries(this.dataCenterMapSeries); this.$refs.dataCenterMap.setSeries(this.dataCenterMapSeries);
this.$refs.dataCenterMap.endLoading();
} }
}) })
}, },