From 12a3c3413f38a9eb68f8018fb82b0db073f810e2 Mon Sep 17 00:00:00 2001 From: hyx Date: Fri, 17 Apr 2020 10:14:36 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=E9=97=AE?= =?UTF-8?q?=E9=A2=98=201=20dashboard=E6=A8=A1=E5=9D=97prometheus=E6=9F=A5?= =?UTF-8?q?=E8=AF=A2=E6=8E=A5=E5=8F=A3query=E5=86=85=E5=AE=B9=E8=BF=9B?= =?UTF-8?q?=E8=A1=8Cencode=EF=BC=88=E5=8C=85=E6=8B=AC=E7=89=B9=E6=AE=8A?= =?UTF-8?q?=E5=AD=97=E7=AC=A6=E7=9A=84query=E5=86=85=E5=AE=B9=E6=97=A0?= =?UTF-8?q?=E6=B3=95=E6=98=BE=E7=A4=BA=E5=9B=BE=E8=A1=A8=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/charts/chart-list.vue | 29 ++++++++++--------- .../src/components/charts/chartPreview.vue | 24 ++++++++------- .../components/charts/line-chart-block.vue | 27 +++++++++-------- .../page/dashboard/metricPreview.vue | 3 +- 4 files changed, 45 insertions(+), 38 deletions(-) diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue index 8710103ec..cc5f2261d 100644 --- a/nezha-fronted/src/components/charts/chart-list.vue +++ b/nezha-fronted/src/components/charts/chart-list.vue @@ -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={}; } // 图表中每条线的名字,后半部分 diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue index b2ca27640..04eb56841 100644 --- a/nezha-fronted/src/components/charts/chartPreview.vue +++ b/nezha-fronted/src/components/charts/chartPreview.vue @@ -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; diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue index ead7b69cf..419ef7036 100644 --- a/nezha-fronted/src/components/charts/line-chart-block.vue +++ b/nezha-fronted/src/components/charts/line-chart-block.vue @@ -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; diff --git a/nezha-fronted/src/components/page/dashboard/metricPreview.vue b/nezha-fronted/src/components/page/dashboard/metricPreview.vue index 0ae3bae73..511838981 100644 --- a/nezha-fronted/src/components/page/dashboard/metricPreview.vue +++ b/nezha-fronted/src/components/page/dashboard/metricPreview.vue @@ -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) {