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

feat：全屏图表添加手动刷新按钮

Browse Source
This commit is contained in:
zhangyu
2020-12-01 10:55:39 +08:00
parent e18da8390d
commit 6d72516a44
9 changed files with 172 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -52,6 +52,7 @@
ref="alertListTable"
:form="'chartList'"
:fromPath="'/alertList'"
:showTopBtn="false"
></alertMessageTable>
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination" :append-to-body="false" pop-class="out-popper-fix"></Pagination>
</div>
@@ -61,6 +62,7 @@
<span class="nz-dialog-title">{{data.title}}</span>
<div class="float-right panel-calendar dialog-tool">
</div>
<span class="float-right dialog-tool" @click="screenRefreshChart"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
</div>
<alertMessageTable
:tableData="storedScreanTableData"
@@ -71,6 +73,7 @@
@tableDataSort="tableDataSort"
@deleteMessage="deleteMessage"
ref="alertListScreenTable"
:showTopBtn="false"
></alertMessageTable>
<Pagination :pageObj="screenPageObj" @pageNo='screenPageNo' @pageSize='screenPageSize' ref="Pagination" ></Pagination>
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
@@ -550,12 +553,21 @@ export default {
if (response.code == 200) {
this.storedTableData = response.data.list;
this.storedScreanTableData=response.data.list;
let axiosAll=[]
this.$nextTick(() => {
this.storedTableData.forEach((item) => {
item.labels = JSON.parse(item.labels);
if(item.alertRule.buildIn != 1){
let paramStr = JSON.stringify(this.promQueryParamConvert(item));
if(paramStr&& paramStr !='""'){
this.$get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")).then(response2 => {
axiosAll.push(axios.get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")))
}else{
axiosAll.push('')
}
});
axios.all(axiosAll).then(res=>{
res.forEach((item,index)=>{
let current = [];
let response2 = item.data;
if (response2.data && response2.data.result && response2.data.result.length > 0) {
current = response2.data.result[0].value.map((item, i) => {
if (i == 0) {
@@ -564,15 +576,13 @@ export default {
return parseFloat(item).toFixed(2);
}
});
}else{
current=[null,null]
}
this.requestIndex+=1;
item.current=current;
if(this.requestIndex===this.storedTableData.length){
this.$set(item, "current", current);
this.requestIndex=0;
}
this.storedTableData[index].current=current;
});
}
this.$set( this.storedTableData,[...this.storedTableData]);
})
});
this.pageObj.total = response.data.total;
this.isError = false;
@@ -588,6 +598,100 @@ export default {
}
});
},
getAlerScreetList: function (filterType,isPreview=false,chartInfo) {
this.resize();
this.loadingTable=true;
this.isPreview = isPreview;
let queryParam={
pageSize:this.screenPageObj.pageSize,
pageNo:this.screenPageObj.pageNo,
}
let chart;
if(chartInfo){
chart=Object.assign({},chartInfo)
}else{
chart=Object.assign({},this.chartInfo)
}
if(chart && chart.param){ //按照粒度，project>module>endpoint 查询只传最细粒度
let param=chart.param;
if(param.endpointId&&param.endpointId != ''){
queryParam.endpointId=param.endpointId;
}else{
if(param.moduleId&&param.moduleId!=''){
queryParam.moduleId=param.moduleId;
}else{
if(param.projectId&&param.projectId!=''){
queryParam.projectId=param.projectId;
}
}
}
if(param.ruleId&&param.ruleId!=''){
queryParam.ruleId=param.ruleId;
}
if(param.severity&&param.severity!=''){
queryParam.severity=param.severity;
}
if(param.state&&param.state!=''){
queryParam.state=param.state;
}
}
if(this.searchLabel.orderBy){
queryParam.orderBy=this.searchLabel.orderBy;
}
this.startLoading(filterType);
this.$get('/alert/message', queryParam).then(response => {
if (response.code == 200) {
this.storedTableData = response.data.list;
this.storedScreanTableData=response.data.list;
let axiosAll=[]
this.$nextTick(() => {
this.storedScreanTableData.forEach((item) => {
item.labels = JSON.parse(item.labels);
if(item.alertRule.buildIn != 1){
let paramStr = JSON.stringify(this.promQueryParamConvert(item));
axiosAll.push(axios.get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")))
}else{
axiosAll.push('')
}
});
axios.all(axiosAll).then(res=>{
res.forEach((item,index)=>{
let current = [];
let response2 = item.data;
if (response2.data && response2.data.result && response2.data.result.length > 0) {
current = response2.data.result[0].value.map((item, i) => {
if (i == 0) {
return bus.computeTimezone(item);
} else {
return parseFloat(item).toFixed(2);
}
});
}else{
current=[null,null]
}
this.storedScreanTableData[index].current=current;
})
this.$set(this.storedScreanTableData,[...this.storedScreanTableData])
})
})
this.screenPageObj.total = response.data.total;
this.isError = false;
this.errorContent = '';
this.divFirstShow = true;
this.firstShow = true; // 展示操作按键
this.loadingTable=false;
this.endLoading(filterType);
}else{
this.isError = true;
this.errorContent = response.msg;
}
});
},
screenRefreshChart(){
this.getAlerScreetList();
},
promQueryParamConvert(obj) {
if(obj){
return "(" + obj.alertRule.expr + ") and (" + function(){
@@ -649,11 +753,11 @@ export default {
screenPageNo(val) {
this.screenPageObj.pageNo = val;
this.getAlertList();
this.getAlerScreetList();
},
screenPageSize(val) {
this.screenPageObj.pageSize = val;
this.getAlertList();
this.getAlerScreetList();
},
startLoading(area){
if(area==='showFullScreen'){
@@ -764,6 +868,7 @@ export default {
this.screenModal = true;
this.deleteBox.ids=[];
this.$refs.alertListTable.$refs.alertListTable.clearSelection();
this.screenPageObj={...this.pageObj}
},
// 设置数据, filter区分
setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {

4
nezha-fronted/src/components/charts/chart-single-stat.vue
View File

@@ -55,6 +55,7 @@
<div class="float-right panel-calendar dialog-tool">
<time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
</div>
<span class="float-right dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
</div>
<div class="single-stat-screen-container" >
<div id="chartScreenContainer" ref="chartScreenContainer" class="single-stat-content" >
@@ -319,6 +320,9 @@ export default {
this.startLoading();
this.divFirstShow = true;
},
screenRefreshChart(){
this.$refs['calendarPanel'].timeChange(this.$refs['calendarPanel'].nowTimeType,'chart')
},
// 重新请求数据 刷新操作-local
refreshChart() {
this.dropdownMenuShow=false;

4
nezha-fronted/src/components/charts/chart-table.vue
View File

@@ -81,6 +81,7 @@
<time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;"
@change="dateChange"></time-picker>
</div>
<span class="float-right dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
</div>
<el-table style="margin-top: 10px;" class="nz-table" height="95%" :data="seriesItemScreen" border
tooltip-effect="light" v-scrollBar:el-table @sort-change="tableDataSortScreen">
@@ -297,6 +298,9 @@
this.startLoading();
this.divFirstShow = true;
},
screenRefreshChart(){
this.$refs['calendarPanel'].timeChange(this.$refs['calendarPanel'].nowTimeType,'chart')
},
// 重新请求数据 刷新操作-local
refreshChart() {
this.dropdownMenuShow = false;

4
nezha-fronted/src/components/charts/chart-url.vue
View File

@@ -41,6 +41,7 @@
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" @opened="initDialog" @close="screenModal = false" >
<div slot="title">
<span class="nz-dialog-title">{{chartData.title}}</span>
<!--<span class="float-right dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>-->
</div>
<iframe :id="'urlContainerFull'+chartIndex" frameborder="0" width="100%" height="100%" name="showHereFull" scrolling=auto v-if="!showStatic"
style="z-index:5000;padding-bottom:6px;"
@@ -197,6 +198,9 @@ export default {
clearChart(){
this.data = {};
},
screenRefreshChart(){
('urlContainerFull'+this.chartIndex).window.location.reload()
},
// 重新请求数据 刷新操作-local
refreshChart() {
this.dropdownMenuShow=false;

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

@@ -132,7 +132,9 @@
<div class="float-right panel-calendar dialog-tool">
<time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
<!--<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime"></pick-time>-->
</div>
<span class="float-right dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
</div>
<div class="line-area" ref="screenShowArea" id="screenShowArea" style="margin-top:0px;" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"></div>
<div class="chart-no-data" v-show="noData">No Data</div>
@@ -1148,6 +1150,9 @@
this.firstShow = false;
this.$emit('on-refresh-data', id);
},
screenRefreshChart(){
this.$refs['calendarPanel'].timeChange(this.$refs['calendarPanel'].nowTimeType,'chart')
},
initDialog(){
//此时初始化，才能获得screenShowArea对象，否则此对象为undefined，无法初始化图表
this.initChart(this.data, this.seriesItem, this.$refs.screenShowArea, 'screen',this.legend);

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

@@ -162,7 +162,7 @@
</template>
</el-table-column>
</el-table>
<button class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
<button class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow &&showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
<!--<弹窗>-->
<!--导出-->
<div class="export-xlsx">
@@ -238,6 +238,10 @@
tableHeight:{},
tableId:{},
projectAlertId:{},
showTopBtn:{
type:Boolean,
default:true,
},
},
data() {
vm = this;

3
nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
View File

@@ -33,6 +33,7 @@
@tableDataSort="tableDataSort"
@deleteMessage="deleteMessage"
@select-change="(selection)=>{this.batchDeleteObjs=selection}"
:showTopBtn="false"
></alertMessageTable>
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
<!--导出-->
@@ -552,7 +553,7 @@
}
this.tableData[index].current=current;
})
this.tableData=[...this.tableData];
this.$set(this.tableData,[...this.tableData])
})
});
this.pageObj.total = response.data.total;

17
nezha-fronted/src/components/common/timePicker.vue
View File

@@ -259,13 +259,19 @@ export default {
this.$set(this.searchTime, 0, timeGroup[0]);
this.$set(this.searchTime, 1, timeGroup[1]);
this.$set(this.showTime, 'id', 0);
this.$set(this.showTime, 'text', this.searchTime[0]+" "+this.$t("dashboard.panel.to")+" "+this.searchTime[1]);
this.nowTimeType={
id:4,
text:this.$t("dashboard.panel.lastOneHour"),
type:'hour',
value:1,
};
this.$set(this.showTime, 'id', this.nowTimeType.id);
this.$set(this.showTime, 'text', this.nowTimeType.text);
}
},
//left(){},
//right(){},
timeChange(val) {
timeChange(val,from) {
this.nowTimeType=val;
this.$set(this.showTime, 'id', val.id);
this.$set(this.showTime, 'text', val.text);
@@ -286,8 +292,13 @@ export default {
let id = val.id;
if(id===0){//custom
if(from==='chart'){
this.isCustom = false;
this.$emit('change', this.searchTime);
} else{
this.isCustom = true;
this.$refs.calendar.focus();
}
}else {
this.isCustom = false;
if(this.showEmpty&& id === 12){

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

@@ -392,7 +392,7 @@
}
this.tableData[index].current=current;
})
this.tableData=[...this.tableData];
this.$set(this.tableData,[...this.tableData])
})
});
this.deleteBox.ids='';