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

perf: endpoint-query改为pl-table等优化

Browse Source 
1.endpoint-query改为pl-table
2.动画结束后再渲染数据
This commit is contained in:
陈劲松
2020-04-20 12:19:11 +08:00
parent 6c0dc58446
commit 575af9543d
2 changed files with 109 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
View File

@@ -49,7 +49,43 @@
</div>
</div>
<div class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
<el-table
<pl-table :row-height="28" use-virtual :datas="tableData" border :empty-text="$t('config.mib.noData')" :header-cell-class-name="cellClass" :height="$tableHeight.noPagination"
class="nz-table endpoint-query-table" style="width: 100%;" v-loading="loading" v-scrollBar:el-table="'large'" :pagination-show="false" ref="endpointQueryTable"
@selection-change="selectChange">
<pl-table-column
:resizable="false"
type="selection"
width="39"
align="center"
:selectable="selectable">
</pl-table-column>
<pl-table-column
prop="element"
:label="$t('project.endpoint.element')">
<template v-slot="scope">
<el-popover trigger="click" placement="right" v-if="typeof scope.row.metricTip != 'undefined' && scope.row.metricTip != null">
<div>
<ul>
<li><span class="metirc-tip-list">metric&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.metric?scope.row.metricTip.metric:'&#45;&#45;'}}</span></li>
<li><span class="metirc-tip-list">type&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.type?scope.row.metricTip.type:'unknown'}}</span></li>
<li><span class="metirc-tip-list">help&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.help?scope.row.metricTip.help:'&#45;&#45;'}}</span></li>
<li><span class="metirc-tip-list">unit&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.unit?scope.row.metricTip.unit:'&#45;&#45;'}}</span></li>
</ul>
</div>
<span slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
</el-popover>
<span v-html="hideSameLabels?scope.row.colorSimpleElement: scope.row.colorElement"></span>
&lt;!&ndash; <span>{{hideSameLabels?scope.row.simpleElement: scope.row.element}}</span>&ndash;&gt;
</template>
</pl-table-column>
<pl-table-column
:resizable="false"
prop="value"
:label="$t('project.endpoint.value')"
width="180">
</pl-table-column>
</pl-table>
<!--<el-table
:data="tableData"
border
v-scrollBar:el-table="'normal'"
@@ -76,16 +112,16 @@
<el-popover trigger="click" placement="right" v-if="typeof scope.row.metricTip != 'undefined' && scope.row.metricTip != null">
<div>
<ul>
<li><span class="metirc-tip-list">metric&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.metric?scope.row.metricTip.metric:'--'}}</span></li>
<li><span class="metirc-tip-list">metric&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.metric?scope.row.metricTip.metric:'&#45;&#45;'}}</span></li>
<li><span class="metirc-tip-list">type&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.type?scope.row.metricTip.type:'unknown'}}</span></li>
<li><span class="metirc-tip-list">help&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.help?scope.row.metricTip.help:'--'}}</span></li>
<li><span class="metirc-tip-list">unit&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.unit?scope.row.metricTip.unit:'--'}}</span></li>
<li><span class="metirc-tip-list">help&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.help?scope.row.metricTip.help:'&#45;&#45;'}}</span></li>
<li><span class="metirc-tip-list">unit&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.unit?scope.row.metricTip.unit:'&#45;&#45;'}}</span></li>
</ul>
</div>
<span slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
</el-popover>
<span v-html="hideSameLabels?scope.row.colorSimpleElement: scope.row.colorElement"></span>
<!-- <span>{{hideSameLabels?scope.row.simpleElement: scope.row.element}}</span>-->
&lt;!&ndash; <span>{{hideSameLabels?scope.row.simpleElement: scope.row.element}}</span>&ndash;&gt;
</template>
</el-table-column>
<el-table-column
@@ -94,7 +130,7 @@
:label="$t('project.endpoint.value')"
width="180">
</el-table-column>
</el-table>
</el-table>-->
<button class="to-top" v-show="showTopBtn" @click="$('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
<el-dialog class="line-chart-block-modal nz-dialog"
@@ -565,6 +601,7 @@
this.tableData = [];
this.tableDataCopy = '';
this.$get("/prom/api/v1/query?query={endpoint='" + this.currentEndpoint.id + "'}&time=" + this.formatTime).then(response=>{
setTimeout(() => {
this.loading = false;
if(response.status==="success"){
let results = response.data.result;
@@ -635,6 +672,7 @@
}
this.tableDataCopy = JSON.stringify(this.tableData);
}
}, 300);
});
},
clearSelectedMetrics() {

2
nezha-fronted/src/components/page/project/project.vue
View File

@@ -1097,7 +1097,7 @@
.table-header-inner{
position: absolute;
z-index: 1;
top: 40px;
top: 38px;
left: 11px;
cursor: pointer;
}