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

fix: 修复model静态数据失效的问题

Browse Source
This commit is contained in:
chenjinsong
2020-05-26 17:50:18 +08:00
parent 50e340ad90
commit 12e8b1be44
1 changed files with 395 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -83,7 +83,7 @@
animation:150, animation:150,
handle:'.chartTitle', handle:'.chartTitle',
}" > }" >
<div class="chartBox" v-for="(item, index) in dataList" :key="'chartBox'+item.id" :id="item.title+'_'+item.id" <div class="chartBox" v-for="(item, index) in dataList" :key="index" :id="item.title+'_'+item.id"
> >
<line-chart-block v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id" <line-chart-block v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
:ref="'editChart'+item.id" :ref="'editChart'+item.id"
@@ -831,12 +831,15 @@ export default {
this.getAssetInfoChartData(chartItem); this.getAssetInfoChartData(chartItem);
return; return;
} }
if (this.isModel) {
this.modelStaticData(chartInfo, filterType);
} else {
// 没有数据的设置提示信息暂无数据-针对每一个图 // 没有数据的设置提示信息暂无数据-针对每一个图
const len = chartItem.elements.length; const len = chartItem.elements.length;
if (len === 0) { if (len === 0) {
this.$nextTick(() => { this.$nextTick(() => {
if(this.$refs['editChart'+chartItem.id] && this.$refs['editChart'+chartItem.id].length>0){ if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
this.$refs['editChart'+chartItem.id][0].setData(chartItem, [], this.filter.panelId, this.filter);//????怎么设置的无数据？？ this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId, this.filter);//????怎么设置的无数据？？
} }
}); });
} else { } else {
@@ -853,20 +856,20 @@ export default {
startTime = this.filter.start_time; startTime = this.filter.start_time;
endTime = this.filter.end_time; endTime = this.filter.end_time;
} }
} else if(filterType==='showFullScreen'){//全屏时间查询 } else if (filterType === 'showFullScreen') {//全屏时间查询
startTime = this.filter.start_time; startTime = this.filter.start_time;
endTime = this.filter.end_time; endTime = this.filter.end_time;
//this.$parent.refreshTime(startTime,endTime);全屏查询，不更新panel列表的时间条件 //this.$parent.refreshTime(startTime,endTime);全屏查询，不更新panel列表的时间条件
}else { } else {
startTime = this.filter.start_time; startTime = this.filter.start_time;
endTime = this.filter.end_time; endTime = this.filter.end_time;
} }
let step = bus.getStep(startTime,endTime); let step = bus.getStep(startTime, endTime);
this.$nextTick(() => { this.$nextTick(() => {
const axiosArr = chartItem.elements.map((ele) => { const axiosArr = chartItem.elements.map((ele) => {
const filterItem = ele; const filterItem = ele;
let query = encodeURIComponent(filterItem.expression); let query = encodeURIComponent(filterItem.expression);
return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step); return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(startTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
}); });
// 一个图表的所有element单独获取数据 // 一个图表的所有element单独获取数据
axios.all(axiosArr).then((res) => { axios.all(axiosArr).then((res) => {
@@ -887,22 +890,215 @@ export default {
errorMsg = ""; errorMsg = "";
if (response.data.result) { if (response.data.result) {
// 循环处理每个elements下获取的数据列 // 循环处理每个elements下获取的数据列
if(chartItem.type==='singleStat'){ if (chartItem.type === 'singleStat') {
if (this.isModel) { if (response.data.result.length === 1) {
singleStatRlt = 999;
} else {
if(response.data.result.length===1){
let statistics = chartItem.param.statistics; let statistics = chartItem.param.statistics;
if(response.data.result[0].values){ if (response.data.result[0].values) {
singleStatRlt = bus.getSingleStatRlt(statistics,response.data.result[0].values); singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values);
} }
}else if(response.data.result.length > 1){ } else if (response.data.result.length > 1) {
singleStatRlt = this.$t("dashboard.panel.singleStatErrorTip"); singleStatRlt = this.$t("dashboard.panel.singleStatErrorTip");
} }
} } else {
}else { response.data.result.forEach((queryItem, resIndex) => {
response.data.result.forEach((queryItem,resIndex) => {
const seriesItem = { const seriesItem = {
theData: {
name: '',
symbol: 'emptyCircle', //去掉点
symbolSize: [2, 2],
smooth: 0.2, //曲线变平滑
showSymbol: false,
data: [],
type: chartInfo.type,
},
//visible: true,
//threshold: null,
metric_name: '',
};
if (chartInfo.type === 'stackArea') {
seriesItem.theData.type = 'line';
seriesItem.theData.stack = chartInfo.title;
seriesItem.theData.areaStyle = {"opacity": 0.3};
}
// 图表中每条线的名字,后半部分
let host = '';//up,
if (queryItem.metric.__name__) {
host = `${queryItem.metric.__name__}{`;//up,
}
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
// 设置时间-数据格式对
let tempArr = [];
let dpsArr = [];
tempArr = queryItem.values;
dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
dpsArr = dpsArr.map(item => {
return [item[0], [item[1][0], Number(item[1][1])]]
})
// 判断是否有数据, && tagsArr.length > 0
if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
tagsArr.forEach((tag, i) => {
if (tag !== '__name__') {
host += `${tag}="${queryItem.metric[tag]}",`;
}
});
if (host.endsWith(',')) {
host = host.substr(0, host.length - 1);
}
if (queryItem.metric.__name__) {
host += "}";
}
if (!host || host === '') {
host = chartItem.elements[innerPos].expression;
}
//处理legend别名
let alias = this.$refs['editChart' + chartItem.id][0].dealLegendAlias(host, chartItem.elements[innerPos].legend);
if (!alias || alias === '') {
alias = host;
}
legend.push({name: host + resIndex, alias: alias});
// 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
seriesItem.theData.name = host + resIndex;
//alert(seriesItem.theData.name);
seriesItem.metric_name = seriesItem.theData.name;
// 将秒改为毫秒
//alert('table=='+JSON.stringify(queryItem))
seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
/*曲线汇总暂不需要
if (sumData.data[dpsIndex]) {
const sumNum = sumData.data[dpsIndex][1] || 0;
sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
} else {
sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
}
*/
let t_date = new Date(dpsItem[0] * 1000);
let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
tableData.push({//表格数据
// label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
// metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
element: {element: host, alias: alias},
time: timeTmp,//采集时间
value: dpsItem[1],//数值
});
return [dpsItem[0] * 1000, dpsItem[1]];
});
series.push(seriesItem.theData);
} else if (chartItem.elements && chartItem.elements[innerPos]) {
// 无数据提示
/*
const currentInfo = chartItem.elements[innerPos];
const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
this.$message.warning({
duration: 15,
content: errorMsg,
closable: true,
});
*/
}
});
}
}
} else {
if (response.msg) {
//this.$message.error(response.msg);
errorMsg = response.msg;
} else if (response.error) {
//this.$message.error(response.error);
errorMsg = response.error;
} else {
//this.$message.error(response);
errorMsg = response;
}
}
});
if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
let chartData = {
chartItem: chartItem,
series: series,
singleStatRlt: singleStatRlt,
legend: legend,
tableData: tableData,
panelId: this.filter.panelId,
filter: this.filter,
filterType: filterType,
errorMsg: errorMsg,
}
this.chartDataCacheGroup.set(chartInfo.id, chartData);
if (chartItem.type === 'table') {//表格
if (filterType === 'showFullScreen') {//全屏查询
this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
this.filter.panelId, this.filter, filterType, errorMsg);
} else {
this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
this.filter.panelId, this.filter, '', errorMsg);
}
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
if (series.length && chartItem.type === 4) {//曲线汇总
//series.push(sumData);//后续需要
}
if (filterType === 'showFullScreen') {//全屏查询
this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
this.filter.panelId, this.filter, legend, filterType, errorMsg);
} else {
this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
this.filter.panelId, this.filter, legend, '', errorMsg);
}
} else if (chartItem.type === 'singleStat') {
if (filterType === 'showFullScreen') {//全屏查询
this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
this.filter.panelId, this.filter, filterType, errorMsg);
} else {
this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
this.filter.panelId, this.filter, '', errorMsg);
}
}
}
} else {
const type = chartItem.type;
if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
if (type === 'table') {
if (filterType === 'showFullScreen') {//table的全屏查询
this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
this.filter, filterType);
} else {
this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
this.filter);
}
} else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4) {
if (filterType === 'showFullScreen') {//table的全屏查询
this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
this.filter, filterType);
} else {
this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
this.filter);
}
} else if (chartItem.type === 'singleStat') {
if (filterType === 'showFullScreen') {//全屏查询
this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
this.filter.panelId, this.filter, filterType);
} else {
this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
this.filter.panelId, this.filter);
}
}
}
}
}).catch((error) => {
if (error) {
this.$message.error(error.toString());
console.error(error)
}
});
});
}
}
},
modelStaticData(chartInfo, filterType) {
let series = [];
let seriesItem = {
theData: { theData: {
name: '', name: '',
symbol:'emptyCircle', //去掉点 symbol:'emptyCircle', //去掉点
@@ -916,56 +1112,44 @@ export default {
//threshold: null, //threshold: null,
metric_name: '', metric_name: '',
}; };
let legend = [];
let tableData = [];
if(chartInfo.type === 'stackArea'){ if(chartInfo.type === 'stackArea'){
seriesItem.theData.type='line'; seriesItem.theData.type='line';
seriesItem.theData.stack=chartInfo.title; seriesItem.theData.stack=chartInfo.title;
seriesItem.theData.areaStyle={"opacity": 0.3}; seriesItem.theData.areaStyle={"opacity": 0.3};
} }
// 图表中每条线的名字,后半部分 // 图表中每条线的名字,后半部分
let host = '';//up, let host = 'host';//up,
if(queryItem.metric.__name__){ let queryItem = {metric: {item1: "item1", item2: "item2", item3: "item3"}, values: []};
host = `${queryItem.metric.__name__}{`;//up,
}
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"] const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
// 设置时间-数据格式对 // 设置时间-数据格式对
let tempArr = []; let tempArr = [];
let dpsArr = []; let dpsArr = [];
if (this.isModel) {
let timeStamp = Math.floor(new Date().getTime()/1000); let timeStamp = Math.floor(new Date().getTime()/1000);
for (let i = 0; i < 20; i++) { for (let i = 0; i < 20; i++) {
tempArr.push([timeStamp - (20-i)*15, Math.floor(Math.random()*10) + ""]); tempArr.push([timeStamp - (20-i)*15, Math.floor(Math.random()*10) + ""]);
queryItem.values.push(tempArr[i])
dpsArr.push([i+"", tempArr[i]]); dpsArr.push([i+"", tempArr[i]]);
} }
} else {
tempArr = queryItem.values;
dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
dpsArr = dpsArr.map(item => {
return [item[0], [item[1][0], Number(item[1][1])]]
})
}
// 判断是否有数据, && tagsArr.length > 0 // 判断是否有数据, && tagsArr.length > 0
if (dpsArr.length > 0 && this.$refs['editChart'+chartItem.id] && this.$refs['editChart'+chartItem.id].length>0) { if (dpsArr.length > 0 && this.$refs['editChart'+chartInfo.id] && this.$refs['editChart'+chartInfo.id].length>0) {
tagsArr.forEach((tag, i) => { tagsArr.forEach((tag, i) => {
if (tag !== '__name__') { if (tag !== '__name__') {
host += `${tag}="${queryItem.metric[tag]}",`; host += `${tag}="${queryItem.metric[tag]}",`;
} }
}); });
if(host.endsWith(',')){host = host.substr(0,host.length-1);}
if(queryItem.metric.__name__){ if(queryItem.metric.__name__){
host +="}"; host +="}";
} }
if(!host || host===''){
host = chartItem.elements[innerPos].expression;
}
//处理legend别名 //处理legend别名
let alias=this.$refs['editChart'+chartItem.id][0].dealLegendAlias(host,chartItem.elements[innerPos].legend); let alias=this.$refs['editChart'+chartInfo.id][0].dealLegendAlias(host,chartInfo.elements[0].legend);
if(!alias || alias===''){ if(!alias || alias===''){
alias = host; alias = host;
} }
legend.push({name:host+resIndex,alias:alias}); legend.push({name:host, alias:alias});
// 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c // 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
seriesItem.theData.name = host+resIndex; seriesItem.theData.name = host;
//alert(seriesItem.theData.name); //alert(seriesItem.theData.name);
seriesItem.metric_name = seriesItem.theData.name; seriesItem.metric_name = seriesItem.theData.name;
// 将秒改为毫秒 // 将秒改为毫秒
@@ -992,7 +1176,7 @@ export default {
}); });
series.push(seriesItem.theData); series.push(seriesItem.theData);
} else if (chartItem.elements && chartItem.elements[innerPos]) { } else if (chartInfo.elements && chartInfo.elements[0]) {
// 无数据提示 // 无数据提示
/* /*
const currentInfo = chartItem.elements[innerPos]; const currentInfo = chartItem.elements[innerPos];
@@ -1004,103 +1188,50 @@ export default {
}); });
*/ */
} }
}); let singleStatRlt = 999;
} if (this.$refs['editChart' + chartInfo.id] && this.$refs['editChart' + chartInfo.id].length > 0) {
} let errorMsg = '';
}else{
if(response.msg){
//this.$message.error(response.msg);
errorMsg = response.msg;
}else if(response.error){
//this.$message.error(response.error);
errorMsg = response.error;
}else {
//this.$message.error(response);
errorMsg = response;
}
}
});
if(this.$refs['editChart'+chartItem.id] && this.$refs['editChart'+chartItem.id].length>0) {
let chartData = { let chartData = {
chartItem:chartItem, chartItem: chartInfo,
series:series, series: series,
singleStatRlt:singleStatRlt, singleStatRlt: singleStatRlt,
legend:legend, legend: legend,
tableData:tableData, tableData: tableData,
panelId:this.filter.panelId, panelId: this.filter.panelId,
filter:this.filter, filter: this.filter,
filterType:filterType, filterType: filterType,
errorMsg:errorMsg, errorMsg: errorMsg
} }
this.chartDataCacheGroup.set(chartInfo.id,chartData); this.chartDataCacheGroup.set(chartInfo.id, chartData);
if (chartItem.type === 'table') {//表格 if (chartInfo.type === 'table') {//表格
if (filterType === 'showFullScreen') {//全屏查询 if (filterType === 'showFullScreen') {//全屏查询
this.$refs['editChart'+chartItem.id][0].setData(chartItem, tableData, this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, tableData,
this.filter.panelId, this.filter, filterType,errorMsg); this.filter.panelId, this.filter, filterType, '');
} else { } else {
this.$refs['editChart'+chartItem.id][0].setData(chartItem, tableData, this.$refs['editChart' + chartItem.id][0].setData(chartInfo, tableData,
this.filter.panelId, this.filter,'',errorMsg); this.filter.panelId, this.filter, '', '');
} }
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) { } else if (chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 4) {
if (series.length && chartItem.type === 4) {//曲线汇总 if (series.length && chartInfo.type === 4) {//曲线汇总
//series.push(sumData);//后续需要 //series.push(sumData);//后续需要
} }
if (filterType === 'showFullScreen') {//全屏查询 if (filterType === 'showFullScreen') {//全屏查询
this.$refs['editChart'+chartItem.id][0].setData(chartItem, series, this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, series,
this.filter.panelId, this.filter, legend, filterType,errorMsg); this.filter.panelId, this.filter, legend, filterType, errorMsg);
} else { } else {
this.$refs['editChart'+chartItem.id][0].setData(chartItem, series, this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, series,
this.filter.panelId, this.filter, legend,'',errorMsg); this.filter.panelId, this.filter, legend, '', errorMsg);
} }
} else if(chartItem.type ==='singleStat'){ } else if (chartInfo.type === 'singleStat') {
if (filterType === 'showFullScreen') {//全屏查询 if (filterType === 'showFullScreen') {//全屏查询
this.$refs['editChart'+chartItem.id][0].setData(chartItem, singleStatRlt, this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
this.filter.panelId, this.filter, filterType,errorMsg); this.filter.panelId, this.filter, filterType, errorMsg);
} else { } else {
this.$refs['editChart'+chartItem.id][0].setData(chartItem, singleStatRlt, this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
this.filter.panelId, this.filter,'',errorMsg); this.filter.panelId, this.filter, '', errorMsg);
} }
} }
} }
} else {
const type = chartItem.type;
if(this.$refs['editChart'+chartItem.id] && this.$refs['editChart'+chartItem.id].length>0) {
if (type === 'table') {
if (filterType === 'showFullScreen') {//table的全屏查询
this.$refs['editChart'+chartItem.id][0].setData(chartItem, [], this.filter.panelId,
this.filter, filterType);
} else {
this.$refs['editChart'+chartItem.id][0].setData(chartItem, [], this.filter.panelId,
this.filter);
}
} else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4) {
if (filterType === 'showFullScreen') {//table的全屏查询
this.$refs['editChart'+chartItem.id][0].setData(chartItem, [], this.filter.panelId,
this.filter, filterType);
} else {
this.$refs['editChart'+chartItem.id][0].setData(chartItem, [], this.filter.panelId,
this.filter);
}
}else if(chartItem.type ==='singleStat'){
if (filterType === 'showFullScreen') {//全屏查询
this.$refs['editChart'+chartItem.id][0].setData(chartItem, '',
this.filter.panelId, this.filter, filterType);
} else {
this.$refs['editChart'+chartItem.id][0].setData(chartItem, '',
this.filter.panelId, this.filter);
}
}
}
}
}).catch((error) => {
if (error) {
this.$message.error(error.toString());
console.error(error)
}
});
});
}
}, },
getAssetInfoChartData(chartInfo){ getAssetInfoChartData(chartInfo){
if(!this.isModel){ if(!this.isModel){
@@ -1135,11 +1266,30 @@ export default {
let data=response.data; let data=response.data;
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter); this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
}else{ }else{
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, {}, this.filter.panelId, this.filter,reponse.msg); this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, {}, this.filter.panelId, this.filter, response.msg);
} }
}) })
}else{ }else {
this.$refs['editChart'+chartInfo.id][0].endLoading(); let data = {Basic: {
alert:0,
assetType: "xxx",
cabinet: "xxx",
dataCenter: "xxx",
endpoint: 1,
host: "xxx.xxx.xxx.xxx",
id: -1,
model: "xxx",
pingLastReply: new Date(),
pingRtt: 0,
pingStatus: 1,
principal: "admin",
purchaseDate: null,
sn: "xxx",
state: 1,
tel: "xxxxxxxxxxx",
vendor: "xxx"
}};
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
} }
}, },
// 设置图表的宽度 // 设置图表的宽度