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

fix ： 解决console爆粗 以及删除没传ids的问题

Browse Source
This commit is contained in:
zhangyu
2020-08-06 10:10:49 +08:00
parent 0d83ebdf70
commit cf5c7a5f6d
4 changed files with 165 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -374,13 +374,14 @@ export default {
}); });
this.deleteBox.ids = ids.join(","); this.deleteBox.ids = ids.join(",");
}, },
deleteMessage(deleltebox) { deleteMessage(deleltebox,cb) {
this.$put("alert/message", deleltebox).then(res => { this.$put("alert/message", deleltebox).then(res => {
if (res.code === 200) { if (res.code === 200) {
this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")}); this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.deleteBox.show = false; this.deleteBox.show = false;
this.deleteBox.ids=""; this.deleteBox.ids="";
this.getAlertList(); this.getAlertList();
cb();
} else { } else {
this.$message.error(res.msg); this.$message.error(res.msg);
} }
@@ -564,7 +565,7 @@ export default {
} }
this.requestIndex+=1; this.requestIndex+=1;
item.current=current; item.current=current;
if(this.requestIndex===this.tableData.length){ if(this.requestIndex===this.storedTableData.length){
this.$set(item, "current", current); this.$set(item, "current", current);
this.requestIndex=0; this.requestIndex=0;
} }

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

@@ -405,95 +405,97 @@
}else{ }else{
step='30m'; step='30m';
} }
this.$refs.messageChart.startLoading(); if(this.$refs.messageChart){
let axiosArr=[]; this.$refs.messageChart.startLoading();
let paramStr = JSON.stringify(this.promQueryParamConvert(this.currentMsg)); let axiosArr=[];
axiosArr.push(axios.get("/prom/api/v1/query_range?query="+paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")+"&start="+this.$stringTimeParseToUnix(start)+"&end="+this.$stringTimeParseToUnix(end)+"&step="+step)); let paramStr = JSON.stringify(this.promQueryParamConvert(this.currentMsg));
this.legend = []; axiosArr.push(axios.get("/prom/api/v1/query_range?query="+paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")+"&start="+this.$stringTimeParseToUnix(start)+"&end="+this.$stringTimeParseToUnix(end)+"&step="+step));
this.chartDatas = []; this.legend = [];
axios.all(axiosArr).then(res =>{ this.chartDatas = [];
try { axios.all(axiosArr).then(res =>{
res.forEach((response, promIndex) => { try {
if (response.status == 200) { res.forEach((response, promIndex) => {
if (response.data.status == 'success') { if (response.status == 200) {
let queryData = response.data.data.result[0]; if (response.data.status == 'success') {
if (queryData) { let queryData = response.data.data.result[0];
let chartData = { if (queryData) {
type: "line", let chartData = {
symbol: 'none', //去掉点 type: "line",
smooth: 0.2, //曲线变平滑 symbol: 'none', //去掉点
name: '', smooth: 0.2, //曲线变平滑
lineStyle: { name: '',
width: 1, lineStyle: {
opacity: 0.9 width: 1,
}, opacity: 0.9
markLine: { },
silent: true, markLine: {
symbol: ['circle', 'circle'], silent: true,
label: { symbol: ['circle', 'circle'],
distance: this.computeDistance(chartDataFormat.getUnit(this.currentMsg.alertRule.unit ? this.currentMsg.alertRule.unit : 2).compute(this.currentMsg.alertRule.threshold)), label: {
formatter: function (params) { distance: this.computeDistance(chartDataFormat.getUnit(this.currentMsg.alertRule.unit ? this.currentMsg.alertRule.unit : 2).compute(this.currentMsg.alertRule.threshold)),
return chartDataFormat.getUnit($temp.currentMsg.alertRule.unit ? $temp.currentMsg.alertRule.unit : 2).compute(params.value) formatter: function (params) {
} return chartDataFormat.getUnit($temp.currentMsg.alertRule.unit ? $temp.currentMsg.alertRule.unit : 2).compute(params.value)
}, }
lineStyle: { },
color:'#d64f40', lineStyle: {
width:2, color:'#d64f40',
type:'dotted' width:2,
}, type:'dotted'
data: [{ },
yAxis: Number(this.currentMsg.alertRule.threshold) data: [{
}, ] yAxis: Number(this.currentMsg.alertRule.threshold)
}, }, ]
markArea:{ },
itemStyle:{ markArea:{
color:'#d64f40', itemStyle:{
opacity:0.1 color:'#d64f40',
}, opacity:0.1
data:[this.returnMarkArea()] },
} data:[this.returnMarkArea()]
}; }
if(this.currentMsg.alertRule.operator=='=='||this.currentMsg.alertRule.operator=='!='){ };
delete chartData.markArea; if(this.currentMsg.alertRule.operator=='=='||this.currentMsg.alertRule.operator=='!='){
} delete chartData.markArea;
chartData.name += "{"; }
alias += "{"; chartData.name += "{";
Object.keys(queryData.metric).forEach((item, index) => { alias += "{";
let label = item; Object.keys(queryData.metric).forEach((item, index) => {
let value = queryData.metric[label]; let label = item;
chartData.name += label + "='" + value + "',"; let value = queryData.metric[label];
}); chartData.name += label + "='" + value + "',";
chartData.name = chartData.name.charAt(chartData.name.length - 1) == "," ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name; });
chartData.name += "}"; chartData.name = chartData.name.charAt(chartData.name.length - 1) == "," ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name;
let alias = chartData.name; chartData.name += "}";
let legend = { let alias = chartData.name;
name: chartData.name, let legend = {
alias: alias, name: chartData.name,
isGray: false alias: alias,
} isGray: false
this.legend.push(legend); }
chartData.data = queryData.values.map((dpsItem, dpsIndex) => { this.legend.push(legend);
return [bus.computeTimezone(dpsItem[0]) * 1000, parseFloat(dpsItem[1]).toFixed(2)]; chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
}); return [bus.computeTimezone(dpsItem[0]) * 1000, parseFloat(dpsItem[1]).toFixed(2)];
this.chartDatas.push(chartData); });
} this.chartDatas.push(chartData);
} else { }
this.$message.error(response.data.error) } else {
console.error(response.data) this.$message.error(response.data.error)
} console.error(response.data)
} }
}); }
this.$nextTick(() => { });
this.$refs.messageChart.setRandomColors(this.chartDatas.length); this.$nextTick(() => {
this.$refs.messageChart.setLegend(this.legend); this.$refs.messageChart.setRandomColors(this.chartDatas.length);
this.$refs.messageChart.setSeries(this.chartDatas); this.$refs.messageChart.setLegend(this.legend);
this.$refs.messageChart.endLoading(); this.$refs.messageChart.setSeries(this.chartDatas);
}); this.$refs.messageChart.endLoading();
} catch(err) { });
this.$message.error(err); } catch(err) {
this.$refs.messageChart.endLoading(); this.$message.error(err);
} this.$refs.messageChart.endLoading();
}) }
})
}
}, },
computeDistance:function(str){ computeDistance:function(str){
var width = 0; var width = 0;
@@ -572,10 +574,11 @@
this.deleteBox.show = true; this.deleteBox.show = true;
}, },
deleteMessage() { deleteMessage() {
this.$emit('deleteMessage',this.deleteBox); this.$emit('deleteMessage',this.deleteBox,()=>{
this.deleteBox.ids=[];
});
//console.log(this.deleteBox); //console.log(this.deleteBox);
this.deleteBox.show = false; this.deleteBox.show = false;
this.deleteBox.ids=[];
}, },
selectChange(s) { selectChange(s) {
let ids = []; let ids = [];
@@ -920,7 +923,7 @@
display: inline-block; display: inline-block;
} }
/deep/.alert-clean-pop.el-popover{ /deep/.alert-clean-pop.el-popover{
top: -30px; top: -30px !important;
} }
.pointer{ .pointer{
cursor: pointer; cursor: pointer;

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

@@ -59,20 +59,20 @@
</el-dialog> </el-dialog>
</div> </div>
<el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog" <!--<el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"-->
:title="$t('overall.detail')" <!--:title="$t('overall.detail')"-->
:visible.sync="graphShow" <!--:visible.sync="graphShow"-->
width="90%" <!--width="90%"-->
id="viewGraphDialog" <!--id="viewGraphDialog"-->
@close="dialogClose"> <!--@close="dialogClose">-->
<div slot="title"> <!--<div slot="title">-->
{{$t("project.endpoint.dialogTitle")}} <!--{{$t("project.endpoint.dialogTitle")}}-->
<div class="float-right panel-calendar dialog-tool" style="display: flex"> <!--<div class="float-right panel-calendar dialog-tool" style="display: flex">-->
<pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange"></pick-time> <!--<pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange"></pick-time>-->
</div> <!--</div>-->
</div> <!--</div>-->
<chart ref="messageChart" :unit="chartUnit"></chart> <!--<chart ref="messageChart" :unit="chartUnit"></chart>-->
</el-dialog> <!--</el-dialog>-->
</span> </span>
</template> </template>
@@ -291,11 +291,13 @@
changeTab(tab) { changeTab(tab) {
this.$emit('changeTab', tab); this.$emit('changeTab', tab);
}, },
deleteMessage(deleteBox) { deleteMessage(deleteBox,cb) {
console.log(deleteBox)
this.$put("alert/message", deleteBox).then(res => { this.$put("alert/message", deleteBox).then(res => {
if (res.code === 200) { if (res.code === 200) {
this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")}); this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.getAlertList(); this.getAlertList();
cb();
} else { } else {
this.$message.error(res.msg); this.$message.error(res.msg);
} }

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

@@ -59,35 +59,35 @@
</el-dialog> </el-dialog>
</div> </div>
<!--export--> <!--export-->
<div class="export-xlsx"> <!--<div class="export-xlsx">-->
<el-dialog :visible.sync="deleteBox.show" :title="$t('overall.delete')" :modal-append-to-body='false' :show-close="true" width="300px" @close="closeDialog" class="nz-message"> <!--<el-dialog :visible.sync="deleteBox.show" :title="$t('overall.delete')" :modal-append-to-body='false' :show-close="true" width="300px" @close="closeDialog" class="nz-message">-->
<div class="upload-body"> <!--<div class="upload-body">-->
<el-input type="textarea" :placeholder="$t('alert.description')" v-model="deleteBox.remark"></el-input> <!--<el-input type="textarea" :placeholder="$t('alert.description')" v-model="deleteBox.remark"></el-input>-->
<div style="text-align: right; margin-top: 10px;"> <!--<div style="text-align: right; margin-top: 10px;">-->
<button @click="closeDialog" class="el-button el-button--default el-button--small"> <!--<button @click="closeDialog" class="el-button el-button&#45;&#45;default el-button&#45;&#45;small">-->
<span>{{$t('tip.no')}}</span> <!--<span>{{$t('tip.no')}}</span>-->
</button> <!--</button>-->
<button @click="deleteMessage" class="el-button el-button--default el-button--small el-button--primary"> <!--<button @click="deleteMessage" class="el-button el-button&#45;&#45;default el-button&#45;&#45;small el-button&#45;&#45;primary">-->
<span>{{$t('tip.yes')}}</span> <!--<span>{{$t('tip.yes')}}</span>-->
</button> <!--</button>-->
</div> <!--</div>-->
</div> <!--</div>-->
</el-dialog> <!--</el-dialog>-->
</div> <!--</div>-->
<el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog" <!--<el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"-->
:title="$t('overall.detail')" <!--:title="$t('overall.detail')"-->
:visible.sync="graphShow" <!--:visible.sync="graphShow"-->
width="90%" <!--width="90%"-->
id="viewGraphDialog" <!--id="viewGraphDialog"-->
@close="dialogClose"> <!--@close="dialogClose">-->
<div slot="title"> <!--<div slot="title">-->
{{$t("project.endpoint.dialogTitle")}} <!--{{$t("project.endpoint.dialogTitle")}}-->
<div class="float-right panel-calendar dialog-tool" style="display: flex"> <!--<div class="float-right panel-calendar dialog-tool" style="display: flex">-->
<pick-time :refresh-data-func="queryChartDate" :use-refresh="false" :use-chart-unit="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange"></pick-time> <!--<pick-time :refresh-data-func="queryChartDate" :use-refresh="false" :use-chart-unit="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange"></pick-time>-->
</div> <!--</div>-->
</div> <!--</div>-->
<chart ref="messageChart" name="alertMessageChart" :unit="chartUnit"></chart> <!--<chart ref="messageChart" name="alertMessageChart" :unit="chartUnit"></chart>-->
</el-dialog> <!--</el-dialog>-->
</div> </div>
</template> </template>
@@ -554,11 +554,12 @@
} }
this.deleteBox.show = true; this.deleteBox.show = true;
}, },
deleteMessage(deleteBox) { deleteMessage(deleteBox,cb) {
this.$put("alert/message", deleteBox).then(res => { this.$put("alert/message", deleteBox).then(res => {
if (res.code === 200) { if (res.code === 200) {
this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")}); this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.getAlertList(); this.getAlertList();
cb();
} else { } else {
this.$message.error(res.msg); this.$message.error(res.msg);
} }
@@ -833,25 +834,25 @@
} }
this.getAlertList(); this.getAlertList();
this.$nextTick(() => { // this.$nextTick(() => {
//绑定滚动条事件，控制top按钮 // //绑定滚动条事件，控制top按钮
let el = this.$refs.alertListTable.$el.querySelector(".el-table__body-wrapper"); // let el = this.$refs.alertListTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) { // if (el._ps_) {
el.addEventListener("ps-scroll-y", () => { // el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 50) { // if (el._ps_.scrollbarYTop > 50) {
this.tools.showTopBtn = true; // this.tools.showTopBtn = true;
} else { // } else {
this.tools.showTopBtn = false; // this.tools.showTopBtn = false;
} // }
}); // });
el.addEventListener("mouseenter", () => { // el.addEventListener("mouseenter", () => {
this.tools.tableHover = true; // this.tools.tableHover = true;
}); // });
el.addEventListener("mouseleave", () => { // el.addEventListener("mouseleave", () => {
this.tools.tableHover = false; // this.tools.tableHover = false;
}); // });
} // }
}); // });
} }
} }
</script> </script>