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

perf: alert-rule-detail改为树形

Browse Source
This commit is contained in:
chenjinsong
2020-06-30 21:25:59 +08:00
parent 871b8b3d1d
commit f68cac74f5
3 changed files with 93 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
nezha-fronted/src/components/charts/chart-detail.vue
View File

@@ -163,7 +163,7 @@
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{endpointKey[key]}}</div>
</div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`">
<template v-if="key == 'state'"><div id="littleChart" style="cursor: pointer; height: 26px; width: 60px;" @click="preview"></div></template>
<template v-if="key == 'state'"><div id="littleChart" style="cursor: pointer; height: 26px; width: 100px;" @click="preview"></div></template>
<template v-else-if="endpointKey[key]">
<span class="content-text">{{value ? value : "&nbsp;"}}</span>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
@@ -183,15 +183,56 @@
</div>
<!-- alertRule-detail的详情-->
<div class="content-item" v-else-if="data.from == 'alertRule' && data.type == 'alertRuleInfo'">
<div class="content-item" v-else-if="data.from == 'alertRule' && data.type == 'alertRuleInfo' && key != '_module_'" @click="showDeep(`deep-${index}-${i}`)">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span class="content-text">{{key}}</span>
<span class="content-text">
<span><i v-if="item.data._module_[key]" :class="{'el-icon-caret-right': deepShow.indexOf(`deep-${index}-${i}`) == -1,'el-icon-caret-bottom': deepShow.indexOf(`deep-${index}-${i}`) > -1}"></i></span>
<span>{{key}}</span>
<!--<span v-if="item.data._module_[key]">{{Object.keys(item.data._module_[key]).length-1}}个module</span>-->
</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
</div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`">
<span class="content-text">{{value ? value : "&nbsp;"}}</span>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
</div>
<!-- module -->
<el-collapse-transition>
<div class="chart-third-content" v-show="deepShow.indexOf(`deep-${index}-${i}`) > -1">
<template v-for="(module, mProjectName, ti) in item.data._module_" v-if="mProjectName == key">
<div class="content-item" @click.stop="showDeep(`deep-${index}-${i}-${ti}-${fi}`)" v-for="(moduleNum, moduleName, fi) in module" v-if="moduleName != '_endpoint_'">
<div class="content-item-key item-tip deep" :id="`key-${index}-${i}-${ti}-${fi}`">
<span class="content-text">
<span><i v-if="module._endpoint_[moduleName]" :class="{'el-icon-caret-right': deepShow.indexOf(`deep-${index}-${i}-${ti}-${fi}`) == -1,'el-icon-caret-bottom': deepShow.indexOf(`deep-${index}-${i}-${ti}-${fi}`) > -1}"></i></span>
<span>{{moduleName}}</span>
<!--<span v-if="module._endpoint_[moduleName]">{{Object.keys(module._endpoint_[moduleName]).length-1}}个endpoint</span>-->
</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}-${i}-${ti}`, moduleName, fi, ready)">{{moduleName}}</div>
</div>
<div class="content-item-value item-tip deep" :id="`value-${index}-${i}-${ti}-${fi}`">
<span class="content-text">{{moduleNum ? moduleNum : "&nbsp;"}}</span>
</div>
<!-- endpoint -->
<el-collapse-transition>
<div class="chart-forth-content" v-show="deepShow.indexOf(`deep-${index}-${i}-${ti}-${fi}`) > -1">
<template v-if="eModuleName == moduleName" v-for="(endpoint, eModuleName, si) in module._endpoint_">
<div class="content-item" @click.stop v-for="(endpointNum, endpointName, ei) in endpoint">
<div class="content-item-key item-tip deepp" :id="`key-${index}-${i}-${ti}-${fi}-${si}-${ei}`">
<span class="content-text">
<span>{{endpointName}}</span>
</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}-${i}-${ti}-${fi}-${si}`, endpointName, ei, ready)">{{endpointName}}</div>
</div>
<div class="content-item-value item-tip deepp" :id="`value-${index}-${i}-${ti}-${fi}-${si}-${ei}`">
<span class="content-text">{{endpointNum ? endpointNum : "&nbsp;"}}</span>
</div>
</div>
</template>
</div>
</el-collapse-transition>
</div>
</template>
</div>
</el-collapse-transition>
</div>
</template>
</div>
@@ -245,6 +286,7 @@
detail: [], //展示的详情
unit: {},
show: [0], //控制展开/隐藏
deepShow: [], //控制二级/三级的展开/隐藏
isError:false,
errorContent:'',
loading:Object,
@@ -362,6 +404,13 @@
this.show.push(index);
}
},
showDeep(index) {
if (this.deepShow.indexOf(index) > -1) {
this.deepShow.splice(this.deepShow.indexOf(index), 1);
} else {
this.deepShow.push(index);
}
},
startLoading(area){
this.$refs['localLoading'+this.chartIndex].startLoading();
},

14
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -1445,6 +1445,20 @@
let data = {};
d.forEach(item => {
data[item.name] = item.nums;
!data._module_ ? (data._module_ = {}) : "";
if (item.module && item.module instanceof Array && item.module.length > 0) {
data._module_[item.name] = {};;
item.module.forEach(m => {
data._module_[item.name][m.name] = m.nums;
!data._module_[item.name]._endpoint_ ? (data._module_[item.name]._endpoint_ = {}) : "";
if (m.endpoint && m.endpoint instanceof Array && m.endpoint.length > 0) {
data._module_[item.name]._endpoint_[m.name] = {};
m.endpoint.forEach(e => {
data._module_[item.name]._endpoint_[m.name][e.name] = e.nums;
})
}
})
}
});
return data;
}

33
nezha-fronted/src/components/charts/chart.scss
View File

@@ -293,7 +293,7 @@
.chart-info {
padding-top: 6px;
width: 100%;
height: calc(100% - 10px);
height: calc(100% - 34px);
}
.active-icon {
margin: 0;
@@ -314,22 +314,23 @@
line-height: 25px;
user-select: none;
}
.chart-sub-content {
.chart-sub-content, .chart-third-content, .chart-forth-content {
width: 100%;
box-sizing: border-box;
.content-item>div {
>.content-item>.item-tip {
display: inline-block;
box-sizing: border-box;
}
.content-item>div:not(.content-item-value-muti) {
>.content-item>.item-tip:not(.content-item-value-muti) {
padding: 0 3px 0 13px;
}
.content-item {
>.content-item {
font-size: 13px;
line-height: 26px;
border-bottom: 1px solid rgb(235, 238, 245);
border-top: 1px solid rgb(235, 238, 245);
display: flex;
position: relative;
flex-wrap: wrap;
.item-tip> {
.item-tip-hide {
display: none;
@@ -368,6 +369,16 @@
.item-tip:hover>.item-tip-show {
display: block;
}
.item-tip.deep {
padding-left: 26px;
box-sizing: border-box;
height: 26px;
}
.item-tip.deepp {
padding-left: 39px;
box-sizing: border-box;
height: 26px;
}
.tag-value:hover .item-tip-show {
display: block;
}
@@ -379,7 +390,7 @@
.content-item-key {
color: #666;
width: 35%;
height: 100%;
height: 26px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@@ -428,6 +439,14 @@
}
}
}
.chart-sub-content {
>.content-item:first-of-type {
border-top: none;
}
>.content-item:last-of-type {
border-bottom: 1px solid rgb(235, 238, 245);
}
}
}
.chart-url {
.url-container {