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

fix:model table singleStat图表报错修复

Browse Source
This commit is contained in:
wangwenrui
2020-05-27 13:42:28 +08:00
parent 273a4cb41b
commit 5c86185ead
4 changed files with 96 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -1058,7 +1058,7 @@ li{
position: absolute;
right: 0;
}
.config-dropdown, .chart-box-dropdown, .chart-box-dropdown-mini, .metric-dropdown {
.config-dropdown, .chart-box-dropdown, .chart-box-dropdown-mini,.chart-box-dropdown-small, .metric-dropdown {
z-index: 2950 !important;
}
.dc-dropdown {
@@ -1105,6 +1105,9 @@ li{
.chart-box-dropdown-mini{
width: 110px;
}
.chart-box-dropdown-small{
width: 200px;
}
.config-dropdown-btn i {
font-size: 12px;
}

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

@@ -1124,64 +1124,69 @@ export default {
},
modelStaticData(chartInfo, filterType) {
let series = [];
let seriesItem = {
theData: {
name: '',
symbol:'emptyCircle', //去掉点
symbolSize:[2,2],
smooth:0.2, //曲线变平滑
showSymbol:false,
data: [],
type:chartInfo.type,
},
//visible: true,
//threshold: null,
metric_name: '',
};
let legend = [];
let tableData = [];
if(chartInfo.type === 'stackArea'){
seriesItem.theData.type='line';
seriesItem.theData.stack=chartInfo.title;
seriesItem.theData.areaStyle={"opacity": 0.3};
}
// 图表中每条线的名字,后半部分
let host = 'host';//up,
let queryItem = {metric: {item1: "item1", item2: "item2", item3: "item3"}, values: []};
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
// 设置时间-数据格式对
let tempArr = [];
let dpsArr = [];
let timeStamp = Math.floor(new Date().getTime()/1000);
for (let i = 0; i < 20; i++) {
tempArr.push([timeStamp - (20-i)*15, Math.floor(Math.random()*10) + ""]);
queryItem.values.push(tempArr[i])
dpsArr.push([i+"", tempArr[i]]);
}
// 判断是否有数据, && tagsArr.length > 0
if (dpsArr.length > 0 && this.$refs['editChart'+chartInfo.id] && this.$refs['editChart'+chartInfo.id].length>0) {
tagsArr.forEach((tag, i) => {
if (tag !== '__name__') {
host += `${tag}="${queryItem.metric[tag]}",`;
let singleStatRlt = 999;
if (chartInfo.type === 'singleStat') {
let statistics = chartInfo.param.statistics;
} else {
let 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 = 'host';//up,
let queryItem = {metric: {item1: "item1", item2: "item2", item3: "item3"}, values: []};
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
// 设置时间-数据格式对
let tempArr = [];
let dpsArr = [];
let timeStamp = Math.floor(new Date().getTime() / 1000);
for (let i = 0; i < 20; i++) {
tempArr.push([timeStamp - (20 - i) * 15, Math.floor(Math.random() * 10) + ""]);
queryItem.values.push(tempArr[i])
dpsArr.push([i + "", tempArr[i]]);
}
// 判断是否有数据, && tagsArr.length > 0
if (dpsArr.length > 0 && this.$refs['editChart' + chartInfo.id] && this.$refs['editChart' + chartInfo.id].length > 0) {
tagsArr.forEach((tag, i) => {
if (tag !== '__name__') {
host += `${tag}="${queryItem.metric[tag]}",`;
}
});
if (queryItem.metric.__name__) {
host += "}";
}
});
if(queryItem.metric.__name__){
host +="}";
}
//处理legend别名
let alias=this.$refs['editChart'+chartInfo.id][0].dealLegendAlias(host,chartInfo.elements[0].legend);
if(!alias || alias===''){
alias = host;
}
legend.push({name:host, alias:alias});
// 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
seriesItem.theData.name = host;
//alert(seriesItem.theData.name);
seriesItem.metric_name = seriesItem.theData.name;
// 将秒改为毫秒
//alert('table=='+JSON.stringify(queryItem))
seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
/*曲线汇总暂不需要
//处理legend别名
console.log(this.$refs['editChart' + chartInfo.id])
let alias = this.$refs['editChart' + chartInfo.id][0].dealLegendAlias(host, chartInfo.elements[0].legend);
if (!alias || alias === '') {
alias = host;
}
legend.push({name: host, alias: alias});
// 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
seriesItem.theData.name = host;
//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];
@@ -1189,22 +1194,22 @@ export default {
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],//数值
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]];
});
return [dpsItem[0] * 1000, dpsItem[1]];
});
series.push(seriesItem.theData);
series.push(seriesItem.theData);
} else if (chartInfo.elements && chartInfo.elements[0]) {
// 无数据提示
/*
} else if (chartInfo.elements && chartInfo.elements[0]) {
// 无数据提示
/*
const currentInfo = chartItem.elements[innerPos];
const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
this.$message.warning({
@@ -1213,8 +1218,8 @@ export default {
closable: true,
});
*/
}
}
let singleStatRlt = 999;
if (this.$refs['editChart' + chartInfo.id] && this.$refs['editChart' + chartInfo.id].length > 0) {
let errorMsg = '';
let chartData = {
@@ -1234,7 +1239,7 @@ export default {
this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, tableData,
this.filter.panelId, this.filter, filterType, '');
} else {
this.$refs['editChart' + chartItem.id][0].setData(chartInfo, tableData,
this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, tableData,
this.filter.panelId, this.filter, '', '');
}
} else if (chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 4) {

6
nezha-fronted/src/components/common/language/cn.js
View File

@@ -155,6 +155,12 @@ const cn = {
legend: "图例",
legendTip: "使用名称或表达式控制时间序列的名称。例如{{hostname}将替换为标签主机名的标签值。",
option: "操作",
alertParam:{
select:'选择',
alertRule:'告警规则',
level:'级别',
state:'状态'
}
},
chartTableColumn: {
metric: "指标",

10
nezha-fronted/src/components/common/language/en.js
View File

@@ -146,6 +146,9 @@ const en = {
},
singleStat:{
label:"SingleStat"
},
alertInfo:{
label:"Alert information"
}
},
statisticsVal:{
@@ -163,6 +166,13 @@ const en = {
metric:'Metric', //"指标"
option:'Option',
addMetric:'Add metric', //"添加指标"
alertParam:{
param:'Parameters',
select:'Select',
alertRule:'Alert rule',
level:'Level',
state:'State'
}
},
chartTableColumn:{
metric:'Metric', //'指标'