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

fix： 优化 metrics 的数据 不再频繁调用接口

Browse Source
This commit is contained in:
zhangyu
2021-09-28 16:54:07 +08:00
parent 8388a0593f
commit cd72fad4b7
11 changed files with 168 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
View File

@@ -13,9 +13,10 @@
v-if="type !== 'log'" :props="cascaderProps" @change="metricChangeNew" style="margin-top: 5px">
<template slot-scope="{ node, data }">
<div :class="['nz-cascade',data.temp&&!data.child?'nz-cascade-temp':'']" @click="()=>{lazyLoad(node,data)}" :title="data.label">
<div :class="['nz-cascade',data.temp&&!data.child?'nz-cascade-temp':'',data.more?'cascader-panel-more':'']" @click="()=>{lazyLoad(node,data)}" :title="data.label">
<i class="nz-icon nz-icon-template2"></i>
{{data.label}}
<i v-if="data.more" class="nz-icon nz-icon-arrow-down"></i>
</div>
</template>
</el-cascader-panel>
@@ -23,7 +24,7 @@
v-model="cascaderValue" v-clickoutside="closeDropdown" v-loading="tempBoxShowLoading"
:loading="loading" :props="cascaderProps" @change="logLabelChange">
<template slot-scope="{ node, data }">
<div :title="data.label" class="nz-cascade">
<div :title="data.label" class="nz-cascade">
{{data.label}}
</div>
</template>
@@ -62,9 +63,10 @@
v-if="type !== 'log'" :props="{emitPath:false}" :options="metricOptions" @change="metricChangeNew">
<template slot-scope="{ node, data }">
<div :class="['nz-cascade',data.temp&&!data.child?'nz-cascade-temp':'']" @click="()=>{lazyLoad(node,data)}" :title="data.label">
<div :class="['nz-cascade',data.temp&&!data.child?'nz-cascade-temp':'',data.more?'cascader-panel-more':'']" @click="()=>{lazyLoad(node,data)}" :title="data.label">
<i class="nz-icon nz-icon-template2"></i>
{{data.label}}
<i v-if="data.more" class="nz-icon nz-icon-arrow-down"></i>
</div>
</template>
@@ -269,7 +271,7 @@ export default {
}
},
mounted () {
if (!this.fromFatherData) {
if (!this.fromFatherData && this.type !== 'logs') {
this.queryMetrics()
}
},
@@ -442,6 +444,42 @@ export default {
}
})
}
} else if (data.children && !data.children.length && this.type !== 'log') {
this.metricOptions.forEach(item => {
if (!item.temp && item.children && item.value != data.value) {
item.children = []
}
})
setTimeout(() => {
new Promise(resolve => {
const children = this.$store.state.metricsList.find(item => item.value === data.value).children
resolve(children)
}).then((children) => {
const childrenCopy = JSON.parse(JSON.stringify(children))
this.metricOptions.find(item => item.label === data.label).children = childrenCopy
// if (childrenCopy.length > 100) {
// childrenCopy.splice(100, children.length)
// childrenCopy.push({
// label: 'More',
// value: false,
// parent: data.label,
// more: true
// })
// this.metricOptions.find(item => item.label === data.label).children = childrenCopy
// } else {
// this.metricOptions.find(item => item.label === data.label).children = childrenCopy
// }
})
})
} else if (data.more) {
setTimeout(() => {
new Promise(resolve => {
const children = this.$store.state.metricsList.find(item => item.label === data.parent).children
resolve(children)
}).then((children) => {
this.metricOptions.find(item => item.label === data.parent).children = children
})
})
}
},
tempBoxShowChange (flag) {
@@ -604,6 +642,15 @@ export default {
this.cascaderValue = ''
}
}
},
metricOptionsParent: {
deep: true,
immediate: true,
handler (n, o) {
if (n) {
this.metricOptions = JSON.parse(JSON.stringify(n))
}
}
}
}
}
@@ -740,6 +787,9 @@ export default {
/*background: #F8F9FB;*/
}
.cascader-panel-more {
text-align: center;
}
.temp-form-box{
width: 480px;
}