+ :popper-append-to-body="false"
+ @change="changeTopologyOpt(lineName,'lineName')">
-
-
-
-
-
-
-
+
+
+
+
+
+
+
@@ -425,41 +428,44 @@
this.getTopologyData().then((data)=>{
this.openTopologyData(data).then(()=>{
//获取对应的值 给节点 连线添加对应动画
- console.log(data);
this.lineName=data.lineName?data.lineName:this.lineName;
this.chartGetData=[];
let axiosArr=[];
+ let promiseArr=[];
+ let self=this;
+ let pensPromise=(pen, arr,index)=>{
+ return new Promise(function(resolve, reject) {
+ Promise.all(arr).then((res)=>{
+ self.chartGetData[index].res=self.computeData(res,pen.data.aggregation,pen);
+ self.setAnimation(pen,self.chartGetData[index].res);
+ resolve()
+ });
+ });
+ };
let endTime=this.filterTime[1];
let startTime=this.filterTime[0];
let step=bus.getStep(startTime,endTime);
- data.pens&&data.pens.forEach(item=>{
- console.log(item.id);
+ data.pens&&data.pens.forEach((item,index)=>{
this.chartGetData.push({id:item.id,res:[]});
let arr=item.data.expressArr.map((ele)=>{
let query=encodeURIComponent(ele);
+ if(!query){
+ return new Promise(resolve=>{
+ resolve({data:"",status:'no query'});
+ })
+ }
query+='&nullType='+'connected';
return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
});
axiosArr.push({item,arr});
+ promiseArr.push(pensPromise(item,arr,index))
});
-
- axios.all(axiosArr).then(all=>{
- all.forEach((obj,index)=>{
- this.chartGetData[index].res=obj.arr;
- if(obj.item.type===0){// 判断valueMapping 给相应的状态
- // obj.item.animateType='warning';
- if(obj.item.animateType){
- onChangeAnimate(obj.item,obj.item.animateType)
- }
- }else if(obj.item.type===1){// 判断valueMapping 给相应的状态
- // onChangeAnimateLine(obj.item,'beads')
- }
- })
- }).then(()=>{
+ Promise.all(promiseArr).then((res)=>{
getTopology(this.topologyIndex).open(data);
getTopology(this.topologyIndex).lock(1);
});
+
this.getNodesArr();
})
});
@@ -469,41 +475,44 @@
this.getTopologyData().then((data)=>{
this.openTopologyData(data).then(()=>{
//获取对应的值 给节点 连线添加对应动画
- console.log(data);
this.lineName=data.lineName?data.lineName:this.lineName;
this.chartGetData=[];
let axiosArr=[];
+ let promiseArr=[];
+ let self=this;
+ let pensPromise=(pen, arr,index)=>{
+ return new Promise(function(resolve, reject) {
+ Promise.all(arr).then((res)=>{
+ self.chartGetData[index].res=self.computeData(res,pen.data.aggregation,pen);
+ self.setAnimation(pen,self.chartGetData[index].res);
+ resolve()
+ });
+ });
+ };
let endTime=this.filterTime[1];
let startTime=this.filterTime[0];
let step=bus.getStep(startTime,endTime);
- data.pens&&data.pens.forEach(item=>{
- console.log(item.id);
+ data.pens&&data.pens.forEach((item,index)=>{
this.chartGetData.push({id:item.id,res:[]});
let arr=item.data.expressArr.map((ele)=>{
let query=encodeURIComponent(ele);
+ if(!query){
+ return new Promise(resolve=>{
+ resolve({data:"",status:'no query'});
+ })
+ }
query+='&nullType='+'connected';
return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
});
axiosArr.push({item,arr});
+ promiseArr.push(pensPromise(item,arr,index))
});
-
- axios.all(axiosArr).then(all=>{
- all.forEach((obj,index)=>{
- this.chartGetData[index].res=obj.arr;
- if(obj.item.type===0){// 判断valueMapping 给相应的状态
- // obj.item.animateType='warning';
- if(obj.item.animateType){
- onChangeAnimate(obj.item,obj.item.animateType)
- }
- }else if(obj.item.type===1){// 判断valueMapping 给相应的状态
- // onChangeAnimateLine(obj.item,'beads')
- }
- })
- }).then(()=>{
+ Promise.all(promiseArr).then((res)=>{
getTopology(this.topologyIndex).open(data);
getTopology(this.topologyIndex).lock(1);
});
+
this.getNodesArr();
})
});
@@ -527,12 +536,165 @@
getTopologyData(){
return new Promise(resolve=>{
let data=localStorage.getItem('data');
- data=data?JSON.parse(data):{bkColor:'#FFFFFF',gridSize:10,gridColor:'#ededed',lineWidth:1,ruleColor:"#4e4e4e"};
+ data=data?JSON.parse(data):{
+ bkColor:'#FFFFFF',
+ gridSize:10,
+ gridColor:'#ededed',
+ lineWidth:1,
+ ruleColor:"#4e4e4e"
+ };
this.saveData={...data};
resolve(data);
});
},
+ //赋值动画
+ setAnimation(pen,res){// 根据所有res的状态 赋值动画
+ let maxLevel=0;
+ if(res.length>0){
+ res.forEach((response,innerPos)=>{
+ if(response.status!=='success'){
+ return
+ }
+ if (response.data.result) {
+ response.data.result.forEach((queryItem, resIndex) => {
+ queryItem.showValue=9;
+ pen.data.valueMapping.forEach((item,index)=>{
+ if(item.value==='base'){return}
+ if( queryItem.showValue >item.value){
+ queryItem.level=item.level;
+ if(maxLevelitem.level===maxLevel);
+ onChangeAnimate(pen,selLevel.animateType,selLevel.color.fill,selLevel.color.line);
+ pen.font.color=selLevel.color.text;
+ }else if(pen.type===1){// 判断valueMapping 给相应的状态
+ let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
+ pen.animateColor=selLevel.color.fill;
+ pen.strokeStyle=selLevel.color.line;
+ pen.animateType=selLevel.animateType;
+ onChangeAnimateLine(pen,pen.animateType);
+ pen.font.color=selLevel.color.text;
+ }
+ } else {
+ if(pen.type===0&&pen.animatePlay){// 判断valueMapping 给相应的状态
+ onChangeAnimate(pen,pen.animateType);
+ }else if(pen.type===1&&pen.animatePlay){// 判断valueMapping 给相应的状态
+ onChangeAnimateLine(pen,pen.animateType);
+ }
+ }
+ },
+ computeData(res,type,pen){//处理别名 以及 根据type显示对应的值
+ if(res.length>0){
+ res.forEach((response,innerPos)=>{
+ if(response.status!=='success'){
+ return
+ }
+
+ if (response.data.result) {
+ response.data.result.forEach((queryItem, resIndex) => {
+ // 图表中每条线的名字,后半部分
+ 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) {
+ 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 = pen.data.expressArr[innerPos];
+ }
+ //处理legend别名
+ let alias = this.dealLegendAlias(host, pen.data.legends[innerPos]);
+ if (!alias || alias === '') {
+ alias = host;
+ }
+ queryItem.legend={name: host+"-"+pen.data.legends[innerPos]+"-" + resIndex, alias: alias};
+ queryItem.showValue=this.getMetricTypeValue(queryItem,type);
+ // 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
+ }
+ });
+ }
+
+ })
+ }
+ return res
+ },
+ 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 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;
+ }
+ },
+ getMetricTypeValue(queryItem,type){
+ let copy='';
+ copy=JSON.parse(JSON.stringify(queryItem.values));
+ switch (type) {
+ case 'min':
+ let min =copy.sort((x,y)=>{return parseFloat(x[1]) - parseFloat(y[1])})[0][1];
+ return min;
+ case 'max':
+ let max =copy.sort((x,y)=>{return parseFloat(y[1]) - parseFloat(x[1])})[0][1];
+ return max;
+ case 'avg':
+ copy = copy.map(t=>parseFloat(t[1]));
+ let sum = eval(copy.join('+'));
+ let avg = sum / copy.length;
+ return avg;
+ case 'last':
+ let last =copy.sort((x,y)=>{return parseFloat(y[0]) - parseFloat(x[0])})[0][1];
+ return last;
+ case 'first':
+ let first =copy.sort((x,y)=>{return parseFloat(y[0]) - parseFloat(x[0])})[copy.length][1];
+ return first;
+ case 'total':
+ copy = copy.map(t=>parseFloat(t[1]));
+ let total = eval(copy.join('+'));
+ return total;
+ }
+ },
//获取module
getModule(){
this.projectInfo.loading=true;
@@ -658,13 +820,14 @@
},
onMessage(event,data){
- console.log('onMessage',event,data);
- console.log(getTopology(this.topologyIndex))
+ // console.log('onMessage',event,data);
+ // console.log(getTopology(this.topologyIndex))
if(getTopology(this.topologyIndex)){
this.cachesIndex=getTopology(this.topologyIndex).caches.index;
if(this.$refs.topTool){
this.$refs.topTool.redoFlag=false
- };
+ }
+ ;
}
if(!Array.isArray(data)&&data){//判断不是数组 提前个data配置好节点属性
if(data.type===0&& !data.data){
@@ -679,7 +842,17 @@
lineWidth:this.nodeDefaultWidth(data.name),
iconToolState:true,
//chart 配置项
- valueMapping:[],
+ valueMapping:[{
+ color:{
+ line:'#000000',
+ fill:'#ffffff',
+ text:'#000000',
+ },
+ value:'base',
+ animateType:'base',
+ level:0,
+ base:true,
+ }],
expressArr:[],
legends:[],
tooltipShow:true,
@@ -703,7 +876,17 @@
toArrowColor:data.toArrowColor,
lineWidth:1,
//chart 配置项
- valueMapping:[],
+ valueMapping:[{
+ color:{
+ border:'#000000',
+ bac:'#ffffff',
+ text:'#000000',
+ },
+ value:'base',
+ animateType:'base',
+ level:0,
+ base:true,
+ }],
expressArr:[],
legends:[],
tooltipShow:true,
@@ -721,11 +904,6 @@
data.lineWidth=data.data.lineWidth;
}
}
-
-
- // if(event==='addNode'&&data.name==='rectangleImg'){
- // data.lineWidth=0;
- // }
switch(event){
case 'moveInNode':
case 'moveInLine':
@@ -734,7 +912,6 @@
this.timer3=null
}
this.chartData={...data.data,...this.chartGetData.find(item=>item.id===data.id)};
- console.log(this.chartData);
this.tooltipPosition.show=true;
break;
case 'moveOutNode':
@@ -1102,6 +1279,7 @@
item.fillStyle=item.data.fillStyle;
item.strokeStyle=item.data.strokeStyle;
item.animatePlay=item.data.animatePlay;
+ item.font.color="#000000";
}else if(item.type===1){
item.animateColor=item.data.animateColor;
item.strokeStyle=item.data.strokeStyle;
@@ -1109,6 +1287,7 @@
item.fromArrowColor=item.data.fromArrowColor;
item.toArrowColor=item.data.toArrowColor;
item.animatePlay=item.data.animatePlay;
+ item.font.color="#000000";
}
})
let domRect=document.getElementById('topology-canvas').getBoundingClientRect();
@@ -1229,23 +1408,26 @@
}