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

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

@@ -247,7 +247,7 @@
this.chart=chartInfo; this.chart=chartInfo;
let chartType= chartInfo.type; let chartType= chartInfo.type;
let chartContainerId = 'chartEchartPreview' let chartContainerId = 'chartEchartPreview';
if(chartType==='table'){ if(chartType==='table'){
this.tableShow = false; this.tableShow = false;
chartContainerId = 'chartTablePreview'; chartContainerId = 'chartTablePreview';
@@ -303,7 +303,7 @@
that.$refs.loadingPreview.endLoading(); that.$refs.loadingPreview.endLoading();
} }
} }
console.log('=======',this.chart) console.log('=======',this.chart);
iframe.src = this.chart.param.url; iframe.src = this.chart.param.url;
}); });
} }
@@ -369,7 +369,8 @@ console.log('=======',this.chart)
this.$nextTick(() => { this.$nextTick(() => {
const axiosArr = chartItem.elements.map((ele) => { const axiosArr = chartItem.elements.map((ele) => {
const filterItem = 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单独获取数据 // 一个图表的所有element单独获取数据
axios.all(axiosArr).then((res) => { axios.all(axiosArr).then((res) => {
@@ -401,7 +402,7 @@ console.log('=======',this.chart)
}; };
if(chartItem.type === 'stackArea'){ if(chartItem.type === 'stackArea'){
seriesItem.theData.type='line'; seriesItem.theData.type='line';
seriesItem.theData.stack=chartItem.title seriesItem.theData.stack=chartItem.title;
seriesItem.theData.areaStyle={}; seriesItem.theData.areaStyle={};
} }
// 图表中每条线的名字,后半部分 // 图表中每条线的名字,后半部分
@@ -532,7 +533,7 @@ console.log('=======',this.chart)
name: item.name name: item.name
}); });
} }
}) });
this.isGreyScreen.forEach((item,i)=>{ this.isGreyScreen.forEach((item,i)=>{
if(index != i){ if(index != i){
if(!curIsGrey && !item){ if(!curIsGrey && !item){
@@ -663,7 +664,7 @@ console.log('=======',this.chart)
params.forEach((item, i) => { params.forEach((item, i) => {
let tip=legend.find((element)=>{ let tip=legend.find((element)=>{
return element.name == item.seriesName; return element.name == item.seriesName;
}) });
if(i===0){ if(i===0){
let t_date = new Date(item.data[0]); let t_date = new Date(item.data[0]);
str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " " 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); let step = bus.getStep(startTime,endTime);
axiosArr = this.chart.elements.map((ele) => { axiosArr = this.chart.elements.map((ele) => {
const filterItem = 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) => { axios.all(axiosArr).then((res) => {
@@ -963,7 +965,7 @@ console.log('=======',this.chart)
}; };
if(this.chart.type === 'stackArea'){ if(this.chart.type === 'stackArea'){
seriesItem.theData.type='line'; seriesItem.theData.type='line';
seriesItem.theData.stack=this.chart.title seriesItem.theData.stack=this.chart.title;
seriesItem.theData.areaStyle={}; seriesItem.theData.areaStyle={};
} }
// 图表中每条线的名字,后半部分 // 图表中每条线的名字,后半部分
@@ -1023,15 +1025,15 @@ console.log('=======',this.chart)
dealLegendAlias:function(legend,expression){ dealLegendAlias:function(legend,expression){
if(/\{\{.+\}\}/.test(expression)){ if(/\{\{.+\}\}/.test(expression)){
let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){ let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2) let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2);
let reg=new RegExp(label+'=".+?"') let reg=new RegExp(label+'=".+?"');
let value=null; let value=null;
if(reg.test(legend)){ if(reg.test(legend)){
let find=legend.match(reg)[0]; let find=legend.match(reg)[0];
value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1); value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
} }
return value?value:label; return value?value:label;
}) });
return labelValue return labelValue
}else{ }else{
return expression; 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'; chartBox[_this.chartIndex].style.width = (containerWidth+chartBoxPadding)+'px';
_this.echartStore.resize({height:(containerHeight-divHeight-_this.titleHeight)}); _this.echartStore.resize({height:(containerHeight-divHeight-_this.titleHeight)});
} }
} };
document.onmouseup=function(){ document.onmouseup=function(){
let targetDivHeightNew = parseInt(targetDiv.style.height); let targetDivHeightNew = parseInt(targetDiv.style.height);
@@ -459,7 +459,7 @@
height:(containerHeight+_this.chartSpaceHeight), height:(containerHeight+_this.chartSpaceHeight),
prev:parseInt(_this.data.prev), prev:parseInt(_this.data.prev),
next:parseInt(_this.data.next), next:parseInt(_this.data.next),
} };
//alert('=55='+JSON.stringify(modifyParams)); //alert('=55='+JSON.stringify(modifyParams));
_this.$put('panel/'+ _this.panelIdInner+'/charts/modify',modifyParams).then(response => { _this.$put('panel/'+ _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
if (response.code === 200) { if (response.code === 200) {
@@ -519,7 +519,7 @@
name: item.name name: item.name
}); });
} }
}) });
this.isGrey.forEach((item,i)=>{ this.isGrey.forEach((item,i)=>{
if(index != i){ if(index != i){
if(!curIsGrey && !item){ if(!curIsGrey && !item){
@@ -574,7 +574,7 @@
name: item.name name: item.name
}); });
} }
}) });
this.isGreyScreen.forEach((item,i)=>{ this.isGreyScreen.forEach((item,i)=>{
if(index != i){ if(index != i){
if(!curIsGrey && !item){ if(!curIsGrey && !item){
@@ -746,7 +746,7 @@
params.forEach((item, i) => { params.forEach((item, i) => {
let tip=legend.find((element)=>{ let tip=legend.find((element)=>{
return element.name == item.seriesName; return element.name == item.seriesName;
}) });
if(i===0){ if(i===0){
let value=bus.computeTimezone(item.data[0]); let value=bus.computeTimezone(item.data[0]);
let t_date = new Date(value); let t_date = new Date(value);
@@ -1250,14 +1250,17 @@
if (type === 'list') { // 普通模式,主控台使用 if (type === 'list') { // 普通模式,主控台使用
axiosArr = this.data.elements.map((ele) => { axiosArr = this.data.elements.map((ele) => {
const filterItem = 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') { // 概览模式,指标概览中使用 } else if (type === 'dashboard') { // 概览模式,指标概览中使用
// 概览模式,需要区分单独一个和多个 // 概览模式,需要区分单独一个和多个
if (this.stableFilter.chartCount === 'multiple') { 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 { } 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'){ if(this.data.type === 'stackArea'){
seriesItem.theData.type='line'; seriesItem.theData.type='line';
seriesItem.theData.stack=this.data.title seriesItem.theData.stack=this.data.title;
seriesItem.theData.areaStyle={}; seriesItem.theData.areaStyle={};
} }
// 图表中每条线的名字,后半部分 // 图表中每条线的名字,后半部分
@@ -1399,15 +1402,15 @@
dealLegendAlias:function(legend,expression){ dealLegendAlias:function(legend,expression){
if(/\{\{.+\}\}/.test(expression)){ if(/\{\{.+\}\}/.test(expression)){
let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){ let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2) let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2);
let reg=new RegExp(label+'=".+?"') let reg=new RegExp(label+'=".+?"');
let value=null; let value=null;
if(reg.test(legend)){ if(reg.test(legend)){
let find=legend.match(reg)[0]; let find=legend.match(reg)[0];
value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1); value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
} }
return value?value:label; return value?value:label;
}) });
return labelValue return labelValue
}else{ }else{
return expression; 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.start_time = startTime;
this.filter.end_time = endTime; this.filter.end_time = endTime;
let step = bus.getStep(startTime,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; this.$refs.metricSet.loading = false;
if (response.status === 'success') { if (response.status === 'success') {
if (response.data.result) { if (response.data.result) {