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

feat: alert-message和sub-message的current等

Browse Source
This commit is contained in:
chenjinsong
2020-05-15 15:48:28 +08:00
parent 630e096858
commit 23bec6d945
3 changed files with 128 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -104,11 +104,17 @@
{{scope.row['state'] == 2 ? "Expired" : ""}} {{scope.row['state'] == 2 ? "Expired" : ""}}
</span> </span>
</div> </div>
<div v-else-if="item.prop == 'current'" class="too-long-split">{{scope.row.current}}</div> <div v-else-if="item.prop == 'current'" class="too-long-split" >
<div v-else-if="item.prop == 'option'" class="content-right-options"> <span v-if="!scope.row.current">-</span>
<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> <el-popover v-else placement="right" trigger="hover">
<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> <span slot="reference">{{scope.row.current[1]}}</span>
</div> <div>{{$unixTimeParseToString(scope.row.current[0])}}</div>
</el-popover>
</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-chart"></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> <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
<template v-else>-</template> <template v-else>-</template>
</template> </template>
@@ -189,10 +195,12 @@
<script> <script>
import axios from 'axios'; import axios from 'axios';
import nzAlertTag from '../../../page/alert/nzAlertTag'; import nzAlertTag from '../../../page/alert/nzAlertTag';
import chart from '../../../page/dashboard/overview/chart'
export default { export default {
name: "alertMessageTab", name: "alertMessageTab",
components: { components: {
'nz-alert-tag': nzAlertTag 'nz-alert-tag': nzAlertTag,
'chart': chart
}, },
props: { props: {
from: String, //来自哪个主页面，有："asset"、"alertRule" from: String, //来自哪个主页面，有："asset"、"alertRule"
@@ -204,6 +212,7 @@
graphShow: false, graphShow: false,
chartDatas: [], chartDatas: [],
legend: [], legend: [],
sameLabels: ['instance','module','project','asset','endpoint','datacenter'],
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()], searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
defaultSearchValue: this.obj.alertNum ? 1 : 0, defaultSearchValue: this.obj.alertNum ? 1 : 0,
@@ -483,66 +492,60 @@
step='30m'; step='30m';
} }
let axiosArr=[]; let axiosArr=[];
let queryParam = this.promQueryParamConvert(obj); let paramStr = JSON.stringify(this.promQueryParamConvert(obj));
axiosArr.push(axios.get("/prom/api/v1/query_range?query="+queryParam+"&start="+this.$stringTimeParseToUnix(start)+"&end="+this.$stringTimeParseToUnix(end)+"&step="+step)); 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.legend = []; this.legend = [];
this.chartDatas = []; this.chartDatas = [];
axios.all(axiosArr).then(res =>{ axios.all(axiosArr).then(res =>{
res.forEach((response,promIndex)=>{ try {
console.info(response); res.forEach((response, promIndex) => {
if (response.status == 200) { if (response.status == 200) {
if(response.data.status == 'success'){ if (response.data.status == 'success') {
let queryData=response.data.data.result[0]; let queryData = response.data.data.result[0];
/*if(queryData){ if (queryData) {
let chartData={ let chartData = {
type:"line", type: "line",
symbol:'none', //去掉点 symbol: 'none', //去掉点
smooth:true, //曲线变平滑 smooth: true, //曲线变平滑
}; name: ''
chartData.name=queryData.metric.__name__; };
let alias=queryData.metric.__name__; chartData.name += "{";
delete queryData.metric.__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;
if(!this.sameLabels.some((i)=>{return i == label})){ chartData.name += "}";
alias+=label +"='"+value+"',"; let alias = chartData.name;
let legend = {
name: chartData.name,
alias: alias,
isGray: false
} }
}) this.legend.push(legend);
chartData.name=chartData.name.charAt(chartData.name.length-1) == ","?chartData.name.substr(0,chartData.name.length-1):chartData.name; chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
alias=alias.charAt(alias.length-1) == ","?alias.substr(0,alias.length-1):alias; return [dpsItem[0] * 1000, parseFloat(dpsItem[1]).toFixed(1)];
chartData.name+="}"; });
alias+="}"; this.chartDatas.push(chartData);
if(!/.+\{.+\}/.test(alias)){ this.$refs.messageChart.setRandomColors(this.chartDatas.length)
alias=alias.substr(0,alias.length-2); this.$refs.messageChart.setLegend(this.legend)
this.$refs.messageChart.setSeries(this.chartDatas);
} }
let legend={ } else {
name:chartData.name, this.$message.error(response.data.error)
alias:alias, console.error(response.data)
// 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.$nextTick(()=>{ this.$refs.messageChart.endLoading();
this.$refs.messageChart.setRandomColors(this.chartDatas.length) });
this.$refs.messageChart.setLegend(this.legend) } catch(err) {
this.$refs.messageChart.setSeries(this.chartDatas); this.$message.error(err);
this.$refs.messageChart.endLoading(); this.$refs.messageChart.endLoading();
}); }
}) })
}, },
detail(obj) { detail(obj) {
@@ -586,8 +589,12 @@
this.tableData.forEach((item) => { this.tableData.forEach((item) => {
item.labels = JSON.parse(item.labels); item.labels = JSON.parse(item.labels);
let paramStr = JSON.stringify(this.promQueryParamConvert(item)); 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 => { this.$get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")).then(response2 => {
console.info(response2) let current = [];
if (response2.data && response2.data.result && response2.data.result.length > 0) {
current = response2.data.result[0].value;
}
this.$set(item, "current", current);
}); });
}); });
this.pageObj.total = response.data.total; this.pageObj.total = response.data.total;

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

@@ -500,6 +500,7 @@
chartData.data=queryData.values.map((dpsItem, dpsIndex) => { chartData.data=queryData.values.map((dpsItem, dpsIndex) => {
return [dpsItem[0] * 1000, Number(dpsItem[1])]; return [dpsItem[0] * 1000, Number(dpsItem[1])];
}); });
console.info(chartData.data)
this.chartDatas.push(chartData); this.chartDatas.push(chartData);
} }
}else{ }else{

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

@@ -118,7 +118,13 @@
{{scope.row['state'] == 2 ? "Expired" : ""}} {{scope.row['state'] == 2 ? "Expired" : ""}}
</span> </span>
</div> </div>
<div v-else-if="item.prop == 'current'" class="too-long-split">{{scope.row.current}}</div> <div v-else-if="item.prop == 'current'" class="too-long-split" >
<span v-if="!scope.row.current">-</span>
<el-popover v-else placement="right" trigger="hover">
<span slot="reference">{{scope.row.current[1]}}</span>
<div>{{$unixTimeParseToString(scope.row.current[0])}}</div>
</el-popover>
</div>
<div v-else-if="item.prop == 'option'" class="content-right-options"> <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-chart"></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> <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>
@@ -245,6 +251,7 @@
//详情相关 //详情相关
graphShow: false, graphShow: false,
chartDatas: [], chartDatas: [],
sameLabels: ['instance','module','project','asset','endpoint','datacenter'],
legend: [], legend: [],
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()], searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
@@ -477,65 +484,59 @@
} }
let axiosArr=[]; let axiosArr=[];
let paramStr = JSON.stringify(this.promQueryParamConvert(obj)); 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="+this.$stringTimeParseToUnix(start)+"&end="+this.$stringTimeParseToUnix(end)+"&step="+step)); 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.legend = []; this.legend = [];
this.chartDatas = []; this.chartDatas = [];
axios.all(axiosArr).then(res =>{ axios.all(axiosArr).then(res =>{
res.forEach((response,promIndex)=>{ try {
console.info(response); res.forEach((response, promIndex) => {
if (response.status == 200) { if (response.status == 200) {
if(response.data.status == 'success'){ if (response.data.status == 'success') {
let queryData=response.data.data.result[0]; let queryData = response.data.data.result[0];
if(queryData){ if (queryData) {
let chartData={ let chartData = {
type:"line", type: "line",
symbol:'none', //去掉点 symbol: 'none', //去掉点
smooth:true, //曲线变平滑 smooth: true, //曲线变平滑
}; name: ''
chartData.name=queryData.metric.__name__; };
let alias=queryData.metric.__name__; chartData.name += "{";
delete queryData.metric.__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;
if(!this.sameLabels.some((i)=>{return i == label})){ chartData.name += "}";
alias+=label +"='"+value+"',"; let alias = chartData.name;
let legend = {
name: chartData.name,
alias: alias,
isGray: false
} }
}) this.legend.push(legend);
chartData.name=chartData.name.charAt(chartData.name.length-1) == ","?chartData.name.substr(0,chartData.name.length-1):chartData.name; chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
alias=alias.charAt(alias.length-1) == ","?alias.substr(0,alias.length-1):alias; return [dpsItem[0] * 1000, parseFloat(dpsItem[1]).toFixed(1)];
chartData.name+="}"; });
alias+="}"; this.chartDatas.push(chartData);
if(!/.+\{.+\}/.test(alias)){ this.$refs.messageChart.setRandomColors(this.chartDatas.length)
alias=alias.substr(0,alias.length-2); this.$refs.messageChart.setLegend(this.legend)
this.$refs.messageChart.setSeries(this.chartDatas);
} }
let legend={ } else {
name:chartData.name, this.$message.error(response.data.error)
alias:alias, console.error(response.data)
// 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.$nextTick(()=>{ this.$refs.messageChart.endLoading();
this.$refs.messageChart.setRandomColors(this.chartDatas.length) });
this.$refs.messageChart.setLegend(this.legend) } catch(err) {
this.$refs.messageChart.setSeries(this.chartDatas); this.$message.error(err);
this.$refs.messageChart.endLoading(); this.$refs.messageChart.endLoading();
}); }
}) })
}, },
detail(obj) { detail(obj) {
@@ -577,8 +578,12 @@
this.tableData.forEach((item) => { this.tableData.forEach((item) => {
item.labels = JSON.parse(item.labels); item.labels = JSON.parse(item.labels);
let paramStr = JSON.stringify(this.promQueryParamConvert(item)); 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 => { this.$get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")).then(response2 => {
console.info(response2) let current = [];
if (response2.data && response2.data.result && response2.data.result.length > 0) {
current = response2.data.result[0].value;
}
this.$set(item, "current", current);
}); });
}); });
this.pageObj.total = response.data.total; this.pageObj.total = response.data.total;