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

feat: alert-message 请求参数encode

Browse Source
This commit is contained in:
chenjinsong
2020-05-13 18:23:10 +08:00
parent 8fbef2576a
commit 2ee68afe2c
2 changed files with 175 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -104,6 +104,11 @@
{{scope.row['state'] == 2 ? "Expired" : ""}}
</span>
</div>
<div v-else-if="item.prop == 'current'" class="too-long-split">{{scope.row.current}}</div>
<div v-else-if="item.prop == 'option'" class="content-right-options">
<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'sub-alert-list-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'sub-alert-list-delete-'+scope.row.id"><i class="el-icon-delete"></i></span>
</div>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
<template v-else>-</template>
</template>
@@ -147,7 +152,7 @@
</div>
</el-dialog>
</div>
<!--删除确认提示-->
<!--export-->
<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="deleteBox.show = false" class="nz-message">
<div class="upload-body">
@@ -163,6 +168,21 @@
</div>
</el-dialog>
</div>
<el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
:title="$t('overall.detail')"
:visible.sync="graphShow"
width="90%"
id="viewGraphDialog"
@close="dialogClose">
<div slot="title">
{{$t("project.endpoint.dialogTitle")}}
<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;"></pick-time>
</div>
</div>
<chart ref="messageChart" ></chart>
</el-dialog>
</span>
</template>
@@ -180,6 +200,12 @@
},
data() {
return {
//详情相关
graphShow: false,
chartDatas: [],
legend: [],
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
defaultSearchValue: this.obj.alertNum ? 1 : 0,
showElementSet: false,
tableId: 'alertListTable', //需要分页的table的id，用于记录每页数量
@@ -237,6 +263,15 @@
label: this.$t('alert.endAt'),
prop: 'endAt',
show: true,
}, {
label: this.$t('alert.list.current'),
prop: 'current',
show: true
}, {
label: this.$t('overall.option'),
prop: 'option',
show: true,
width: 90
}
],
searchMsg: { //给搜索框子组件传递的信息
@@ -432,6 +467,112 @@
}
})
},
queryChartDate(obj) {
let start = this.searchTime[0]?this.searchTime[0]:this.getTime(-1, 'h');
let end = this.searchTime[1]?this.searchTime[1]:this.getTime(0, 'h')
this.searchTime = [start, end];
let timeDiff = (new Date(end).getTime()-new Date(start).getTime())/1000/(24*60*60);
let step = '15s';
if(timeDiff< 1){
step='15s';
}else if(timeDiff < 7){
step='5m';
}else if(timeDiff<30){
step='10m';
}else{
step='30m';
}
let axiosArr=[];
let queryParam = this.promQueryParamConvert(obj);
axiosArr.push(axios.get("/prom/api/v1/query_range?query="+queryParam+"&start="+start+"&end="+end+"&step="+step));
this.legend = [];
this.chartDatas = [];
axios.all(axiosArr).then(res =>{
res.forEach((response,promIndex)=>{
console.info(response);
if (response.status == 200) {
if(response.data.status == 'success'){
let queryData=response.data.data.result[0];
/*if(queryData){
let chartData={
type:"line",
symbol:'none', //去掉点
smooth:true, //曲线变平滑
};
chartData.name=queryData.metric.__name__;
let alias=queryData.metric.__name__;
delete queryData.metric.__name__;
chartData.name+="{";
alias+="{";
Object.keys(queryData.metric).forEach((item,index)=>{
let label=item;
let value=queryData.metric[label];
chartData.name+=label +"='"+value+"',";
if(!this.sameLabels.some((i)=>{return i == label})){
alias+=label +"='"+value+"',";
}
})
chartData.name=chartData.name.charAt(chartData.name.length-1) == ","?chartData.name.substr(0,chartData.name.length-1):chartData.name;
alias=alias.charAt(alias.length-1) == ","?alias.substr(0,alias.length-1):alias;
chartData.name+="}";
alias+="}";
if(!/.+\{.+\}/.test(alias)){
alias=alias.substr(0,alias.length-2);
}
let legend={
name:chartData.name,
alias:alias,
// showText:this.formatLegend(chartData.name),
isGray:false
}
this.legend.push(legend);
chartData.data=queryData.values.map((dpsItem, dpsIndex) => {
return [dpsItem[0] * 1000, Number(dpsItem[1])];
});
this.chartDatas.push(chartData);
}*/
}else{
this.$message.error(response.data.error)
console.error(response.data)
}
}
});
this.$nextTick(()=>{
this.$refs.messageChart.setRandomColors(this.chartDatas.length)
this.$refs.messageChart.setLegend(this.legend)
this.$refs.messageChart.setSeries(this.chartDatas);
this.$refs.messageChart.endLoading();
});
})
},
detail(obj) {
this.chartDatas = [];
this.legend = [];
this.graphShow = true;
this.$nextTick(() => {
this.$refs.messageChart.startLoading();
this.queryChartDate(obj);
});
},
dialogClose() {
this.graphShow = false;
},
del(u) {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("alert/message?ids=" + u.id).then(response => {
if (response.code === 200) {
this.$message({type: 'success', message: this.$t("tip.deleteSuccess")});
this.getAlertList();
} else {
this.$message.error(response.msg);
}
})
});
},
getAlertList() {
this.tableData = [];
this.loading = true;
@@ -444,12 +585,33 @@
this.tableData = response.data.list;
this.tableData.forEach((item) => {
item.labels = JSON.parse(item.labels);
let paramStr = JSON.stringify(this.promQueryParamConvert(item));
this.$get('/prom/api/v1/query' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20")).then(response2 => {
console.info(response2)
});
});
this.pageObj.total = response.data.total;
}
});
}, 1000);
},
promQueryParamConvert(obj) {
return "(" + obj.alertRule.expr + ") and (" + function(){
let q = "{";
for (let k in obj.labels) {
if (k != 'alertname' && k != 'severity') {
q += k;
q += "=";
q += ("'" + obj.labels[k] + "',");
}
};
if (q.length > 1) {
q = q.substring(0, q.length-1);
}
q += "}";
return q;
}() + ")";
},
pageNo(val) {
this.pageObj.pageNo = val;
this.getAlertList();

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

@@ -120,7 +120,7 @@
</div>
<div v-else-if="item.prop == 'current'" class="too-long-split">{{scope.row.current}}</div>
<div v-else-if="item.prop == 'option'" class="content-right-options">
<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'alert-list-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'alert-list-detail-'+scope.row.id"><i class="nz-icon nz-icon-chart"></i></span>
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'alert-list-delete-'+scope.row.id"><i class="el-icon-delete"></i></span>
</div>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
@@ -476,8 +476,8 @@
step='30m';
}
let axiosArr=[];
let queryParam = this.promQueryParamConvert(obj);
axiosArr.push(axios.get("/prom/api/v1/query_range?query="+queryParam+"&start="+start+"&end="+end+"&step="+step));
let paramStr = JSON.stringify(this.promQueryParamConvert(obj));
axiosArr.push(axios.get("/prom/api/v1/query_range?query="+paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20")+"&start="+start+"&end="+end+"&step="+step));
this.legend = [];
this.chartDatas = [];
axios.all(axiosArr).then(res =>{
@@ -486,7 +486,7 @@
if (response.status == 200) {
if(response.data.status == 'success'){
let queryData=response.data.data.result[0];
/*if(queryData){
if(queryData){
let chartData={
type:"line",
symbol:'none', //去掉点
@@ -523,7 +523,7 @@
return [dpsItem[0] * 1000, Number(dpsItem[1])];
});
this.chartDatas.push(chartData);
}*/
}
}else{
this.$message.error(response.data.error)
console.error(response.data)
@@ -576,7 +576,8 @@
this.tableData = response.data.list;
this.tableData.forEach((item) => {
item.labels = JSON.parse(item.labels);
this.$get('/prom/api/v1/query', {query: this.promQueryParamConvert(item)}).then(response2 => {
let paramStr = JSON.stringify(this.promQueryParamConvert(item));
this.$get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20")).then(response2 => {
console.info(response2)
});
});
@@ -588,9 +589,11 @@
return "(" + obj.alertRule.expr + ") and (" + function(){
let q = "{";
for (let k in obj.labels) {
if (k != 'alertname' && k != 'severity') {
q += k;
q += "=";
q += ("'" + obj.labels[k] + "',");
}
};
if (q.length > 1) {
q = q.substring(0, q.length-1);