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

fix：修改问题

Browse Source 
1 dashboard模块prometheus查询接口query内容进行encode（包括特殊字符的query内容无法显示图表）
This commit is contained in:
hyx
2020-04-17 10:14:36 +08:00
parent 9d1a0f605b
commit 12a3c3413f
4 changed files with 45 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -164,7 +164,7 @@ export default {
console.log('change', event)
},
start (event) {
console.log('start', event, this.dataList)
console.log('start', event, this.dataList);
let item = event.item;
let chartTitle = item.querySelector('.chartTitle');
chartTitle.style.background = '#d8dce1';
@@ -263,7 +263,7 @@ export default {
height:newItem.height,
prev:newItem.prev,
next:newItem.next,
}
};
if(this.dataList.length>1){
this.$put('panel/'+ this.pagePanelId+'/charts/modify',modifyParams).then(response => {
if (response.code === 200) {
@@ -316,11 +316,11 @@ export default {
a.href=canvas.toDataURL();
a.download="drcQrcode";
a.click();*/
console.log('clone-image',image)
console.log('clone-image',image);
let ctxClone = canvasclone.getContext("2d");
//ctxClone.drawImage(image,0,0);
image.onload = function(){
console.log('clone-image-load',image)
console.log('clone-image-load',image);
ctxClone.drawImage(image,0,0);
}
@@ -378,7 +378,7 @@ export default {
targetDiv.style.left=(startX+distX)+'px';
}
*/
}
};
document.onmouseup=function(){
document.onmousemove=null;
@@ -396,16 +396,16 @@ export default {
e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
},
handleDragEnter(e,item){
e.dataTransfer.effectAllowed = "move"//为需要移动的元素设置dragstart事件
e.dataTransfer.effectAllowed = "move";//为需要移动的元素设置dragstart事件
if(item === this.dragging){
return
}
const newItems = [...this.dataList]
console.log(newItems)
const src = newItems.indexOf(this.dragging)
const dst = newItems.indexOf(item)
const newItems = [...this.dataList];
console.log(newItems);
const src = newItems.indexOf(this.dragging);
const dst = newItems.indexOf(item);
newItems.splice(dst, 0, ...newItems.splice(src, 1))
newItems.splice(dst, 0, ...newItems.splice(src, 1));
this.dataList = newItems
},
@@ -456,7 +456,7 @@ export default {
dataTmpList.push(item);
this.currentRecordNum = i+1;
}else{
this.currentRecordNum = i
this.currentRecordNum = i;
break;
}
}else {//数据加载够了
@@ -571,7 +571,8 @@ export default {
this.$nextTick(() => {
const axiosArr = chartItem.elements.map((ele) => {
const filterItem = ele;
return this.$get('/prom/api/v1/query_range?query='+filterItem.expression+"&start="+startTime+"&end="+endTime+'&step='+step);
let query = encodeURIComponent(filterItem.expression);
return this.$get('/prom/api/v1/query_range?query='+query+"&start="+startTime+"&end="+endTime+'&step='+step);
});
// 一个图表的所有element单独获取数据
axios.all(axiosArr).then((res) => {
@@ -605,7 +606,7 @@ export default {
};
if(chartInfo.type === 'stackArea'){
seriesItem.theData.type='line';
seriesItem.theData.stack=chartInfo.title
seriesItem.theData.stack=chartInfo.title;
seriesItem.theData.areaStyle={};
}
// 图表中每条线的名字,后半部分

24
nezha-fronted/src/components/charts/chartPreview.vue
View File

@@ -247,7 +247,7 @@
this.chart=chartInfo;
let chartType= chartInfo.type;
let chartContainerId = 'chartEchartPreview'
let chartContainerId = 'chartEchartPreview';
if(chartType==='table'){
this.tableShow = false;
chartContainerId = 'chartTablePreview';
@@ -303,7 +303,7 @@
that.$refs.loadingPreview.endLoading();
}
}
console.log('=======',this.chart)
console.log('=======',this.chart);
iframe.src = this.chart.param.url;
});
}
@@ -369,7 +369,8 @@ console.log('=======',this.chart)
this.$nextTick(() => {
const axiosArr = chartItem.elements.map((ele) => {
const filterItem = ele;
return this.$get('/prom/api/v1/query_range?query='+filterItem.expression+"&start="+startTime+"&end="+endTime+'&step='+step);
let query = encodeURIComponent(filterItem.expression);
return this.$get('/prom/api/v1/query_range?query='+query+"&start="+startTime+"&end="+endTime+'&step='+step);
});
// 一个图表的所有element单独获取数据
axios.all(axiosArr).then((res) => {
@@ -401,7 +402,7 @@ console.log('=======',this.chart)
};
if(chartItem.type === 'stackArea'){
seriesItem.theData.type='line';
seriesItem.theData.stack=chartItem.title
seriesItem.theData.stack=chartItem.title;
seriesItem.theData.areaStyle={};
}
// 图表中每条线的名字,后半部分
@@ -532,7 +533,7 @@ console.log('=======',this.chart)
name: item.name
});
}
})
});
this.isGreyScreen.forEach((item,i)=>{
if(index != i){
if(!curIsGrey && !item){
@@ -663,7 +664,7 @@ console.log('=======',this.chart)
params.forEach((item, i) => {
let tip=legend.find((element)=>{
return element.name == item.seriesName;
})
});
if(i===0){
let t_date = new Date(item.data[0]);
str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
@@ -928,7 +929,8 @@ console.log('=======',this.chart)
let step = bus.getStep(startTime,endTime);
axiosArr = this.chart.elements.map((ele) => {
const filterItem = ele;
return this.$get('/prom/api/v1/query_range?query='+filterItem.expression+"&start="+startTime+"&end="+endTime+'&step='+step);
let query = encodeURIComponent(filterItem.expression);
return this.$get('/prom/api/v1/query_range?query='+query+"&start="+startTime+"&end="+endTime+'&step='+step);
});
// 一个图表
axios.all(axiosArr).then((res) => {
@@ -963,7 +965,7 @@ console.log('=======',this.chart)
};
if(this.chart.type === 'stackArea'){
seriesItem.theData.type='line';
seriesItem.theData.stack=this.chart.title
seriesItem.theData.stack=this.chart.title;
seriesItem.theData.areaStyle={};
}
// 图表中每条线的名字,后半部分
@@ -1023,15 +1025,15 @@ console.log('=======',this.chart)
dealLegendAlias:function(legend,expression){
if(/\{\{.+\}\}/.test(expression)){
let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2)
let reg=new RegExp(label+'=".+?"')
let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2);
let reg=new RegExp(label+'=".+?"');
let value=null;
if(reg.test(legend)){
let find=legend.match(reg)[0];
value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
}
return value?value:label;
})
});
return labelValue
}else{
return expression;

27
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -402,7 +402,7 @@
chartBox[_this.chartIndex].style.width = (containerWidth+chartBoxPadding)+'px';
_this.echartStore.resize({height:(containerHeight-divHeight-_this.titleHeight)});
}
}
};
document.onmouseup=function(){
let targetDivHeightNew = parseInt(targetDiv.style.height);
@@ -459,7 +459,7 @@
height:(containerHeight+_this.chartSpaceHeight),
prev:parseInt(_this.data.prev),
next:parseInt(_this.data.next),
}
};
//alert('=55='+JSON.stringify(modifyParams));
_this.$put('panel/'+ _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
if (response.code === 200) {
@@ -519,7 +519,7 @@
name: item.name
});
}
})
});
this.isGrey.forEach((item,i)=>{
if(index != i){
if(!curIsGrey && !item){
@@ -574,7 +574,7 @@
name: item.name
});
}
})
});
this.isGreyScreen.forEach((item,i)=>{
if(index != i){
if(!curIsGrey && !item){
@@ -746,7 +746,7 @@
params.forEach((item, i) => {
let tip=legend.find((element)=>{
return element.name == item.seriesName;
})
});
if(i===0){
let value=bus.computeTimezone(item.data[0]);
let t_date = new Date(value);
@@ -1250,14 +1250,17 @@
if (type === 'list') { // 普通模式,主控台使用
axiosArr = this.data.elements.map((ele) => {
const filterItem = ele;
return this.$get('/prom/api/v1/query_range?query='+filterItem.expression+"&start="+startTime+"&end="+endTime+'&step='+step);
let query = encodeURIComponent(filterItem.expression);
return this.$get('/prom/api/v1/query_range?query='+query+"&start="+startTime+"&end="+endTime+'&step='+step);
});
} else if (type === 'dashboard') { // 概览模式,指标概览中使用
// 概览模式,需要区分单独一个和多个
if (this.stableFilter.chartCount === 'multiple') {
axiosArr = [this.$get('/prom/api/v1/query_range?query='+this.data.title+"&start="+startTime+"&end="+endTime+'&step='+step)];
let query = encodeURIComponent(this.data.title);
axiosArr = [this.$get('/prom/api/v1/query_range?query='+query+"&start="+startTime+"&end="+endTime+'&step='+step)];
} else {
axiosArr = [this.$get('/prom/api/v1/query_range?query='+this.data.elements[0].expression+"&start="+startTime+"&end="+endTime+'&step='+step)];
let query = encodeURIComponent(this.data.elements[0].expression);
axiosArr = [this.$get('/prom/api/v1/query_range?query='+query+"&start="+startTime+"&end="+endTime+'&step='+step)];
}
}
// 一个图表
@@ -1293,7 +1296,7 @@
};
if(this.data.type === 'stackArea'){
seriesItem.theData.type='line';
seriesItem.theData.stack=this.data.title
seriesItem.theData.stack=this.data.title;
seriesItem.theData.areaStyle={};
}
// 图表中每条线的名字,后半部分
@@ -1399,15 +1402,15 @@
dealLegendAlias:function(legend,expression){
if(/\{\{.+\}\}/.test(expression)){
let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2)
let reg=new RegExp(label+'=".+?"')
let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2);
let reg=new RegExp(label+'=".+?"');
let value=null;
if(reg.test(legend)){
let find=legend.match(reg)[0];
value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
}
return value?value:label;
})
});
return labelValue
}else{
return expression;

3
nezha-fronted/src/components/page/dashboard/metricPreview.vue
View File

@@ -260,7 +260,8 @@ export default {
this.filter.start_time = startTime;
this.filter.end_time = endTime;
let step = bus.getStep(startTime,endTime);
this.$get('/prom/api/v1/query_range?query='+params.elements[0].expression+"&start="+startTime+"&end="+endTime+'&step='+step).then(response => {
let query = encodeURIComponent(params.elements[0].expression);
this.$get('/prom/api/v1/query_range?query='+query+"&start="+startTime+"&end="+endTime+'&step='+step).then(response => {
this.$refs.metricSet.loading = false;
if (response.status === 'success') {
if (response.data.result) {