diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue index 5b9f838c6..018570adf 100644 --- a/nezha-fronted/src/components/page/dashboard/chartBox.vue +++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue @@ -191,6 +191,7 @@ :pointer="index" :metric-list="metricList" :metricCascaderList="metricCascaderList" + :metricAllData="metricAllData" :count-total="elements.length" @on-delete-target="deleteTarget" @sub-save-ok="subOk" @@ -292,6 +293,7 @@ selectFirstPanel: false, metricList: [], // metric列表 metricCascaderList:[],//metric级联列表 + metricAllData:new Map(),//存放所有的project-module-metric-labelValue，避免重复加载 deleteIndex: '', // 要删除的指标模块 subCount: 0, // subSave保存data到bus计数器 panel: { @@ -450,12 +452,13 @@ if (this.subCount === this.elements.length) { this.subCount = 0; // 保存完成,进行删除操作 - //alert('box第二步，deleteIndex='+this.deleteIndex+'=开始删除一个元素') - //alert('box第二步，删除之前，elements='+JSON.stringify(this.elements)+' elementTarget='+JSON.stringify(this.elementTarget)+' bus='+JSON.stringify(bus.chartAddInfo.metricTarget)); + console.log('box第二步，deleteIndex='+this.deleteIndex+'=开始删除一个元素') + console.log('box第二步，删除之前，elements='+JSON.stringify(this.elements)+' elementTarget='+JSON.stringify(this.elementTarget)+' bus='+JSON.stringify(bus.chartAddInfo.metricTarget)); this.elements.splice(this.deleteIndex, 1); this.elementTarget.splice(this.deleteIndex, 1);//没有作用，此处是[] bus.chartAddInfo.metricTarget.splice(this.deleteIndex, 1); - //alert('box第二步，删除完毕，elements='+JSON.stringify(this.elements)+' elementTarget='+JSON.stringify(this.elementTarget)+' bus='+JSON.stringify(bus.chartAddInfo.metricTarget)); + console.log('box第二步，删除完毕，elements='+JSON.stringify(this.elements),' elementTarget='+JSON.stringify(this.elementTarget),' bus='+JSON.stringify(bus.chartAddInfo.metricTarget)); + this.$nextTick(() => { this.$refs.chartTag.forEach((item, index) => { item.setSubdata(index); // 将数据从bus重新赋值 @@ -552,6 +555,7 @@ }, // 更新图表 updateCharts(params) { + console.log('))))))))))))=',params) this.$put('panel/' + this.panelId + '/charts', params).then(response2 => { if (response2.code === 200) { this.esc(); @@ -632,7 +636,9 @@ getSuggestMetric() { //this.$get('/prom/api/v1/label/__name__/values').then(response => { this.$get('/module?pageSize=-1').then(response => { + console.log('---response---',response); if (response.code === 200) { + console.log('---response200---',response); this.metricList = response.data.list; const cascaderMap = new Map(); this.metricList.forEach((item,index) => { @@ -650,6 +656,20 @@ childArr.push(childOption); cascaderMap.set(projectName,childArr); } + + //缓存全局数据 + const moduleItem = { + name:moduleName, + metricMap:new Map() + }; + if(this.metricAllData.has(projectName)){ + let moduleGroup = this.metricAllData.get(projectName); + this.metricAllData.get(projectName).push(moduleItem); + }else { + let moduleList = []; + moduleList.push(moduleItem); + this.metricAllData.set(projectName,moduleList); + } }); let metricCascaderArr = []; cascaderMap.forEach(function(value,index){ @@ -660,7 +680,9 @@ }; metricCascaderArr.push(option); }); + this.metricCascaderList = metricCascaderArr; + console.log('---response200metricCascaderList---',this.metricCascaderList); }else { this.metricList = []; this.metricCascaderList = []; @@ -692,6 +714,7 @@ } else { this.$nextTick(() => { + console.log('1_+_+_+_+_+_+',JSON.stringify(elementInfo.elements[0])); this.$refs.chartTag[0].setMdata(elementInfo.elements[0]); }); } @@ -719,7 +742,7 @@ this.chart.height = data.height+''; this.chart.type = data.type; this.chart.unit=data.unit; - this.getSuggestMetric();//获得指标列表 + //this.getSuggestMetric();//获得指标列表 // 指标 this.elements = []; bus.chartAddInfo.metricTarget = []; @@ -754,7 +777,7 @@ this.productId = parseInt(this.$route.params.productId, 10); } */ - this.getSuggestMetric();//this.getSuggestMetric(this.productId); + //this.getSuggestMetric(); }, /*metric部分相关方法--end*/ @@ -807,7 +830,7 @@ }, created() { - + this.getSuggestMetric(); }, watch: { panelData: { @@ -826,7 +849,14 @@ } } } - } + }, + beforeDestroy() { + if(this.$refs.chartTag){ + this.$refs.chartTag.forEach((item, index) => {//循环指标列表 + item.clearSelectedTagList(); + }); + } + }, } @@ -233,11 +282,18 @@ export default { type: Array, default: () => [], }, + metricAllData:Map, metricCascaderList:Array, + //metricCascaderListTmp:Array,//3级级联列表：project/module/metric，metric是在本页面动态获得，并设置本页面的metric对应的label级value（metricLabelValInfo列表，所以不可重复使用？？） + //metricLabelValInfo:Map,//用于存放所有的metric，label，val countTotal: { type: Number, default: 1, }, + hasLegend:{ + type:Boolean, + default:true + } }, components: { //multipleSelect @@ -255,7 +311,10 @@ export default { expression:'', legend:'' }, - metricLabelValInfo:new Map,//用于存放所有的metric，label，val + labelValueCascaderOptions:[],//label及value改为级联后，显示用的待选label及value + labelValueCascaderVal:[],//label及value改为级联后，选择的label及value + //metricCascaderList:[], + metricLabelValInfo:new Map(),//用于存放所有的metric，label，val metricLoading: false, keydataList: [], // tag标签键列表 target: null, // 获取到的数据 @@ -263,6 +322,138 @@ export default { setDataFlag: false, // true时为获取数据,编辑状态 vendorCount: '', labelSort:['project','module','endpoint','datacenter','asset'], + cascaderProps:{ + expandTrigger: 'click', + lazy: true, + that:this, + lazyLoad (node, resolve) { + /* + 1 第一次加载界面：node:{"root":true,"level":0,"loading":true} + 2 点击的一级节点，则直接从list中获得，如果点击的为二级节点，先看对应list里是否有，没有再从接口获得 + */ + let nodeLevel = node.level; + let _this = this.that; + if(nodeLevel===1){ + setTimeout(() => { + resolve([]); + }, 100); + }else if(nodeLevel===2){ + setTimeout(() => { + let project = node.parent.data.label; + let module = node.data.label; + let metricArr = []; + let metricArrTmp = []; + console.log('success=3',project,module,_this.metricCascaderList); + + let metricLabelValMap = new Map(); + let projectItem = _this.metricAllData.get(project); + if(projectItem){ + let moduleItem = projectItem.find(item => item.name === module); + if(moduleItem){ + metricLabelValMap = moduleItem.metricMap; + } + } + if(metricLabelValMap.size>0){ + _this.metricLabelValInfo = metricLabelValMap; + metricLabelValMap.forEach((item,index)=>{ + const childOption = { + value: index, + label: index, + leaf:true, + }; + metricArr.push(childOption); + }); + console.log('success=111',metricArr); + resolve(metricArr); + }else { + console.log('success=222'); + _this.metricCascaderList.map((item, index) => { + if(item.label===project){//选择的project + item.children.map((innerItem, innerIndex) => { + if (innerItem.value === module){ + if (innerItem.children.length === 0) {//不重复加载 + // 当二级分类的的child为空时才请求一次数据 + let match = '{project="'+project+'",module="'+module+'"}'; + _this.$get('/prom/api/v1/series?match[]='+match).then(res => { + console.log('success=5',res) + if (res.status === 'success') { + res.data.forEach((tag, i) => { + let metricName = tag.__name__; + if(metricArrTmp.indexOf(metricName)===-1){ + const childOption = { + value: metricName,//+"_par", + label: metricName, + leaf:nodeLevel>=2, + }; + metricArrTmp.push(metricName); + metricArr.push(childOption); + } + const tagsArr = Object.keys(tag);//["__name__","asset","idc","instance","job","module","project"] + let labelValList = []; + + tagsArr.forEach((tagName) => { + if (tagName !== '__name__') { + const tagObj = { + name: tagName, + list:[], + value:[]//最终选择的值 + }; + let tagValue = tag[tagName]; + const tagItem = labelValList.find(item => item.name === tagName); + if(tagItem){//metric对应的label已添加 + if(tagItem.list.indexOf(tagValue)===-1){//label对于value是否添加，没有添加，则添加 + tagItem.list .push(tagValue); + } + }else {//metric对于的label未添加 + tagObj.list.push(tagValue); + labelValList.push(tagObj); + } + } + }); + if(_this.metricLabelValInfo.has(metricName)){ + let existMetricLabelList = _this.metricLabelValInfo.get(metricName); + labelValList.forEach((labelItem,index)=>{ + const existTagItem = existMetricLabelList.find(item => item.name === labelItem.name); + if(existTagItem){//label已添加 + labelItem.list.forEach((valueItem,valIndex)=>{ + if(existTagItem.list.indexOf(valueItem)===-1){//value未添加 + existTagItem.list.push(valueItem); + } + }) + }else {//label未添加 + existMetricLabelList.push(labelItem); + } + }) + }else { + _this.metricLabelValInfo.set(metricName,labelValList); + } + //全局缓存数据设置 + _this.cacheData(project,module,metricName,labelValList); + }); + resolve(metricArr); + }else { + console.log('success=999') + resolve([]); + } + }) + }else {//已经加载过了 + console.log('success=78') + resolve([]); + } + } + }) + } + }); + } + + }, 1000); + } + setTimeout(() => { + _this.cascaderStyle(); + }, 100); + } + }, + labelValueProps:{ multiple: true }, }; }, watch: {}, @@ -275,6 +466,7 @@ export default { }, // 第二步,on-delete-target回调，保存数据 subSave() { + this.convertLabelValueCascadeVal(); //alert('metric第二步，bus.chartAddInfo.metricTarget,指针'+JSON.stringify(bus.chartAddInfo.metricTarget)+'==pointer'+this.pointer); bus.chartAddInfo.metricTarget[this.pointer] = this.elementInfo; //alert('metric第二步，保存信息到bus'+JSON.stringify(this.elementInfo)) @@ -282,11 +474,11 @@ export default { }, // 第三步,将数据重新赋值,sub-save-ok回调 setSubdata(index) { - //alert('metric第三步，bus='+JSON.stringify(bus.chartAddInfo.metricTarget)); - //alert('metric第三步，bus('+this.pointer+')='+JSON.stringify(bus.chartAddInfo.metricTarget[this.pointer])); + console.log('metric第三步，bus='+JSON.stringify(bus.chartAddInfo.metricTarget)); + console.log('metric第三步，bus('+this.pointer+')='+JSON.stringify(bus.chartAddInfo.metricTarget[this.pointer])); this.elementInfo = bus.chartAddInfo.metricTarget[this.pointer]; - //alert('metric第三步，index'+index+',如果index是当前pointer('+this.pointer+')，则继续，把bus中的值赋值给当前metric') - //alert('metric第三步，elementInfo='+JSON.stringify(this.elementInfo)); + console.log('metric第三步，index'+index+',如果index是当前pointer('+this.pointer+')，则继续，把bus中的值赋值给当前metric') + console.log('metric第三步，elementInfo='+JSON.stringify(this.elementInfo)); if(this.elementInfo.type==='expert'){ //alert('metric第三步，expert'); // 当该项expression为空时，重置一下 @@ -300,25 +492,94 @@ export default { if (!this.elementInfo.metric && this.$refs.metricSelect) { this.$refs.metricSelect.reset(); } + this.setLabelValueCascader(); this.clickTabelShow(1,'normal'); } }, - - + clearSelectedTagList(){ + console.log('--------clear selected') + this.elementInfo.selectedTagList.forEach((selectItem)=>{ + selectItem.value = [];//清空值，再进行赋值 + }); + }, + convertLabelValueCascadeVal(){ + //把级联选择label及value，转换为selectedTagList里的value？？？？？？ + this.clearSelectedTagList(); + console.log('*** this.labelValueCascaderVal***',JSON.stringify(this.labelValueCascaderVal)) + this.labelValueCascaderVal.forEach((item)=>{//[label,value] + let casLabel = item[0]; + let casValue = item[1]; + console.log('*** this.elementInfo.selectedTagList***',JSON.stringify(this.elementInfo.selectedTagList)) + this.elementInfo.selectedTagList.forEach((selectItem)=>{ + let selectLabel = selectItem.name; + let selectValue = selectItem.value; + console.log('111',selectLabel,casLabel) + if(selectLabel===casLabel){ + console.log('222',selectValue.indexOf(casValue),selectValue,casValue) + if(selectValue.indexOf(casValue)===-1){ + selectValue.push(casValue); + } + } + }); + console.log('*** this.elementInfo.selectedTagList***end',JSON.stringify(this.elementInfo.selectedTagList)) + }); + }, // (最后整体保存添加的图标的时候执行)保存, chartdata点击确认后保存本身数据并返回给chartdata saveTarget(pointer,optType) { + console.log(this.pointer,pointer,'this.labelValueCascaderVal=====',JSON.stringify(this.labelValueCascaderVal)); if (this.pointer === pointer) { this.$refs.elementInfo.validate((valid) => { if (valid) {//根据设置的rules进行验证，验证通过，则返回，继续进行保存（每个el-form-item都需要验证） if(this.elementInfo.expression){ this.elementInfo.expression = this.elementInfo.expression.replace(/\s+| /ig,''); } + if(this.elementInfo.type==='normal' && this.elementInfo.metric instanceof Array){ + this.elementInfo.metric = this.elementInfo.metric[2]; + } + console.log('+++++++',JSON.stringify(this.labelValueCascaderVal)); + this.convertLabelValueCascadeVal();//将label，value级联选择的值，转换为selectTagList里 this.$emit('on-add-target-success', this.elementInfo, pointer,optType); } }); } }, + setLableValueFromCache(project,module){ + let projectItem = this.metricAllData.get(project); + if(projectItem){ + let moduleItem = projectItem.find(item => item.name === module); + if(moduleItem){ + this.metricLabelValInfo = moduleItem.metricMap; + } + } + }, + cacheData(project,module,metricName,labelValList){ + let projectItem = this.metricAllData.get(project); + if(projectItem){ + let moduleItem = projectItem.find(item => item.name === module); + if(moduleItem){ + let metricAllMap = moduleItem.metricMap; + if(metricAllMap.has(metricName)){ + let existMetricLabelList = metricAllMap.get(metricName); + labelValList.forEach((labelItem,index)=>{ + const existTagItem = existMetricLabelList.find(item => item.name === labelItem.name); + if(existTagItem){//label已添加 + labelItem.list.forEach((valueItem,valIndex)=>{ + if(existTagItem.list.indexOf(valueItem)===-1){//value未添加 + existTagItem.list.push(valueItem); + } + }) + }else {//label未添加 + existMetricLabelList.push(labelItem); + } + }) + }else { + moduleItem.metricMap.set(metricName,labelValList); + } + } + } + }, setLabelDivHeight(count){ + /* if (count === 0) { const chartBox = document.getElementById('scrollDiv' + this.pointer); chartBox.style.height = `${10}px`; @@ -329,9 +590,84 @@ export default { const chartBox = document.getElementById('scrollDiv' + this.pointer); chartBox.style.height = `${248}px`; } - +*/ }, + /* + getMetricNodes(project,module) { + let metricArr = []; + let metricArrTmp = []; + this.metricCascaderList.map((item, index) => { + if(item.label===project){//选择的project + item.children.map((innerItem, innerIndex) => { + if (innerItem.value === module && innerItem.children.length === 0) {//不重复加载 + // 当二级分类的的child为空时才请求一次数据 + let match = '{project="'+project+'",module="'+module+'"}'; + this.$get('/prom/api/v1/series?match[]='+match).then(res => { + if (res.status === 'success') { + + res.data.forEach((tag, i) => { + let metricName = tag.__name__; + if(metricArrTmp.indexOf(metricName)===-1){ + const childOption = { + value: metricName,//+"_par", + label: metricName + }; + metricArrTmp.push(metricName); + metricArr.push(childOption); + } + //this.$set(item.children[innerIndex], 'children', metricArr); + + const tagsArr = Object.keys(tag);//["__name__","asset","idc","instance","job","module","project"] + let labelValList = []; + + tagsArr.forEach((tagName) => { + if (tagName !== '__name__') { + const tagObj = { + name: tagName, + list:[], + value:[]//最终选择的值 + }; + let tagValue = tag[tagName]; + const tagItem = labelValList.find(item => item.name === tagName); + if(tagItem){//metric对应的label已添加 + if(tagItem.list.indexOf(tagValue)===-1){//label对于value是否添加，没有添加，则添加 + tagItem.list .push(tagValue); + } + }else {//metric对于的label未添加 + tagObj.list.push(tagValue); + labelValList.push(tagObj); + } + } + }); + if(this.metricLabelValInfo.has(metricName)){ + let existMetricLabelList = this.metricLabelValInfo.get(metricName); + labelValList.forEach((labelItem,index)=>{ + const existTagItem = existMetricLabelList.find(item => item.name === labelItem.name); + if(existTagItem){//label已添加 + labelItem.list.forEach((valueItem,valIndex)=>{ + if(existTagItem.list.indexOf(valueItem)===-1){//value未添加 + existTagItem.list.push(valueItem); + } + }) + }else {//label未添加 + existMetricLabelList.push(labelItem); + } + }) + }else { + this.metricLabelValInfo.set(metricName,labelValList); + } + }); + } + }) + } + }) + } + }); + return metricArr; + }, + */ //动态加载第三级选项metric及label + /* handleItemChange(val) { if(val && val.length===2) {//点击二级菜单，才进行查询 let proTmp = val[0]; @@ -410,12 +746,71 @@ export default { }); } }, + */ + cascaderStyle(){ + let cascaderElem = document.querySelectorAll('.dashboard-metric-dropdown>.el-cascader-panel>.el-cascader-menu'); + if(cascaderElem[0]){ + cascaderElem[0].style.minWidth = '80px'; + } + if(cascaderElem[1]){ + cascaderElem[1].style.minWidth = '80px'; + } + if(cascaderElem[2]){ + cascaderElem[2].style.minWidth = '360px'; + } + }, + setLabelValueCascader(){ + this.labelValueCascaderOptions = []; + this.labelValueCascaderVal = []; + this.elementInfo.selectedTagList.forEach((item)=>{ + let valList = item.list; + const labelOption = { + value:item.name, + label:item.name, + children:[] + } + if(valList && valList.length>0){ + valList.forEach((valuItem)=>{ + let disabled = false; + if(item.name==='project' || item.name==='module'){ + disabled = true; + } + const valOption = { + value:valuItem, + label:valuItem, + disabled: disabled, + } + labelOption.children.push(valOption); + }); + } + this.labelValueCascaderOptions.push(labelOption); + + console.log('++++item.val.length',item.value); + if(item.value.length>0){ + item.value.forEach((valueItem)=>{ + let labelVal = []; + labelVal.push(item.name); + labelVal.push(valueItem); + this.labelValueCascaderVal.push(labelVal); + }); + } + }); + console.log('++++val',this.labelValueCascaderVal); + console.log('++++22',this.labelValueCascaderOptions); + }, + changeTag(){ + this.$emit('on-change-condition'); + }, + changeExpression(v){ + this.$emit('on-change-condition'); + }, // 选择metric selectMetric() { + console.log('---setMetricToLabelValue---start') if (this.elementInfo.metric) {//选择了metric，则设置tagList，否则设置为空 this.getSuggestTags(this.elementInfo.metric); + this.setLabelValueCascader(); this.elementInfo.metric = this.elementInfo.metric[2]; - } else { this.elementInfo.tagList = []; this.setLabelDivHeight(0); @@ -425,93 +820,76 @@ export default { this.$refs.scrollbar.update(); }, 100); }); + this.changeTag(); + }, + setLabelValue(tagListTmp,project,module){ + tagListTmp.forEach((item) => { + if(item.name==='project'){ + if(item.value.indexOf(project)===-1){ + item.value.push(project); + } + }else if(item.name==='module'){ + if(item.value.indexOf(module)===-1) { + item.value.push(module); + } + } + }); + this.labelSort.forEach((sortItem) => { + let itemIndex = -1; + tagListTmp.forEach((item,i) => { + if(sortItem===item.name){//labelSort:['project','module','endpoint','datacenter','asset'], + this.elementInfo.selectedTagList.push(item); + itemIndex = i; + } + }); + if(itemIndex!==-1){ + tagListTmp.splice(itemIndex,1); + } + }); + tagListTmp.forEach((item,i) => { + this.elementInfo.selectedTagList.push(item); + }); + + let tagNum = this.elementInfo.selectedTagList.length; + this.$nextTick(() => { + this.setLabelDivHeight(tagNum); + }); }, // 获取tags列表 getSuggestTags(metricArr) { + console.log('---getSuggestTags---start',this.metricLabelValInfo) let metric = metricArr[2]; let proTmp = metricArr[0]; let project = proTmp.substring(0, proTmp.length - 4); let module = metricArr[1]; this.elementInfo.selectedTagList = []; if(this.metricLabelValInfo.has(metric)){ + console.log('---metricLabelValInfo--has---start') let tagListTmp = []; - tagListTmp = [...this.metricLabelValInfo.get(metric)];//[...this.metricList], - //console.log(metric+'!!!!!!!!!!!!!!!!!!!'+JSON.stringify(tagListTmp)); - tagListTmp.forEach((item) => { - if(item.name==='project'){ - item.value.push(project); - }else if(item.name==='module'){ - item.value.push(module); + tagListTmp = [...this.metricLabelValInfo.get(metric)]; + tagListTmp.forEach((selectItem)=>{ + selectItem.value = [];//清空值，再进行赋值 + }); + this.setLabelValue(tagListTmp,project,module); + }else { + let projectItem = this.metricAllData.get(project); + if(projectItem) { + let moduleItem = projectItem.find(item => item.name === module); + if (moduleItem) { + let metricAllMap = moduleItem.metricMap; + if (metricAllMap.has(metric)) { + let tagListTmp = metricAllMap.get(metric); + this.setLabelValue(tagListTmp,project,module); + } } - }); - - this.labelSort.forEach((sortItem) => { - let itemIndex = -1; - tagListTmp.forEach((item,i) => { - if(sortItem===item.name){//labelSort:['project','module','endpoint','datacenter','asset'], - this.elementInfo.selectedTagList.push(item); - itemIndex = i; - } - }); - if(itemIndex!==-1){ - tagListTmp.splice(itemIndex,1); - } - }); - tagListTmp.forEach((item,i) => { - this.elementInfo.selectedTagList.push(item); - }); - - let tagNum = this.elementInfo.selectedTagList.length; - this.$nextTick(() => { - this.setLabelDivHeight(tagNum); - }); - }else{ - this.elementInfo.selectedTagList = []; - this.setLabelDivHeight(0); - } - /* - this.$get('/metric/series?match[]='+metric).then(response => { - this.elementInfo.selectedTagList = []; - let tagListTmp = []; - if (response.code === 200) { - const objList = Object.entries(response.data); - objList.forEach((item) => { - const tagObj = { - name: item[0], - list:item[1], - value:[]//最终选择的值 - }; - if(item[0]==='project'){ - tagObj.value.push(project); - }else if(item[0]==='module'){ - tagObj.value.push(module); - } - tagListTmp.push(tagObj); - }); - this.labelSort.forEach((sortItem) => { - let itemIndex = -1; - tagListTmp.forEach((item,i) => { - if(sortItem===item.name){//labelSort:['project','module','endpoint','datacenter','asset'], - this.elementInfo.selectedTagList.push(item); - itemIndex = i; - } - }); - if(itemIndex!==-1){ - tagListTmp.splice(itemIndex,1); - } - }); - tagListTmp.forEach((item,i) => { - this.elementInfo.selectedTagList.push(item); - }); - - let tagNum = this.elementInfo.selectedTagList.length; - this.setLabelDivHeight(tagNum); - }else { - this.elementInfo.selectedTagList = []; - this.setLabelDivHeight(0); } - });*/ + + //this.elementInfo.selectedTagList = []; + //this.$nextTick(() => { + //this.setLabelDivHeight(0); + //}); + } }, getStyles(width) { return `width: ${width}px;`; @@ -519,107 +897,219 @@ export default { filterMethod(value, option) { return option.toUpperCase().indexOf(value.toUpperCase()) !== -1; }, + getItemValue(labArr,itemName){ + let itemVal = ''; + labArr.forEach((item, index) => { + let labNameTmp = item.substring(0,item.indexOf('='));//project module dc + if(labNameTmp===itemName){ + let labVal = item.substring(item.indexOf('=')+1,item.length); + if(labVal.indexOf('~')!=-1){ + labVal = labVal.substring(2,labVal.length-1); + let valArr = labVal.split('|'); + itemVal = valArr[0]; + }else { + labVal = labVal.substring(1,labVal.length-1); + itemVal = labVal; + } + } + }); + return itemVal; + }, + getMetricLabelValue(metric,othersParams){ - let match = '{__name__="'+metric+'"}'; - this.$get('/prom/api/v1/series?match[]='+match).then(res => { - console.log("==="+JSON.stringify(res)); - //this.$get('http://192.168.40.247:9090/api/v1/series?match[]='+match).then(res => { - if (res.status === 'success') { - let queryItem = res.data;//[]设置 metric和label - let metricArr = []; - let metricArrTmp = []; - res.data.forEach((tag, i) => { - let metricName = tag.__name__; - if(metricArrTmp.indexOf(metricName)===-1){ - const childOption = { - value: metricName,//+"_par", - label: metricName - }; - metricArrTmp.push(metricName); - metricArr.push(childOption); - } - const tagsArr = Object.keys(tag);//["__name__","asset","idc","instance","job","module","project"] - let labelValList = []; - - tagsArr.forEach((tagName) => { - if (tagName !== '__name__') { - const tagObj = { - name: tagName, - list:[], - value:[]//最终选择的值 - }; - let tagValue = tag[tagName]; - const tagItem = labelValList.find(item => item.name === tagName); - if(tagItem){//metric对应的label已添加 - if(tagItem.list.indexOf(tagValue)===-1){//label对于value是否添加，没有添加，则添加 - tagItem.list .push(tagValue); - } - }else {//metric对于的label未添加 - tagObj.list.push(tagValue); - labelValList.push(tagObj); - } + let labArr = othersParams.split(','); + let projectVal = this.getItemValue(labArr,'project'); + let projectCascaderVal = projectVal+'_par'; + let moduleVal = this.getItemValue(labArr,'module'); + this.elementInfo.metric = [projectCascaderVal,moduleVal,metric]; + //先判断缓存中是否已经存在数据，无则再从后台获取 + let metricLabelValMap = new Map(); + let projectItem = this.metricAllData.get(projectVal); + if(projectItem){ + let moduleItem = projectItem.find(item => item.name === moduleVal); + if(moduleItem){ + metricLabelValMap = moduleItem.metricMap; + } + } + if(metricLabelValMap.size>0){ + //设置labelValue列表 + this.metricLabelValInfo = metricLabelValMap; + //设置3级级联metric选择的metric + let metricArr = []; + metricLabelValMap.forEach((item,index)=>{ + const childOption = { + value: index, + label: index, + leaf:true, + }; + metricArr.push(childOption); + }); + this.metricCascaderList.map((item, index) => { + if (item.value === projectCascaderVal) {//选择的project + item.children.map((innerItem, innerIndex) => { + if (innerItem.value === moduleVal && innerItem.children.length === 0) {//不重复加载 + this.$set(innerItem, 'children', metricArr); } - }); - if(this.metricLabelValInfo.has(metricName)){ - let existMetricLabelList = this.metricLabelValInfo.get(metricName); - labelValList.forEach((labelItem,index)=>{ - const existTagItem = existMetricLabelList.find(item => item.name === labelItem.name); - if(existTagItem){//label已添加 - labelItem.list.forEach((valueItem,valIndex)=>{ - if(existTagItem.list.indexOf(valueItem)===-1){//value未添加 - existTagItem.list.push(valueItem); - } - }) - }else {//label未添加 - existMetricLabelList.push(labelItem); - } - }) - }else { - this.metricLabelValInfo.set(metricName,labelValList); - } - }); + }) + } + }); - this.elementInfo.selectedTagList = []; - if(this.metricLabelValInfo.has(metric)){ - let tagListTmp = []; - tagListTmp = [...this.metricLabelValInfo.get(metric)];//[...this.metricList], - //设置选择的值 - let labArr = othersParams.split(','); - tagListTmp.forEach((tagItem) => { - let labelName = tagItem.name; - labArr.forEach((item, index) => {//b=~'1|2|3' - let labNameTmp = item.substring(0,item.indexOf('='));//project module dc - if(labNameTmp===labelName){ - let labVal = item.substring(item.indexOf('=')+1,item.length); - if(labVal.indexOf('~')!=-1){ - labVal = labVal.substring(2,labVal.length-1); - let valArr = labVal.split('|'); - valArr.forEach((labItem, labIndex) => { + this.elementInfo.selectedTagList = []; + if(this.metricLabelValInfo.has(metric)){ + let tagListTmp = []; + tagListTmp = [...this.metricLabelValInfo.get(metric)];//[...this.metricList], + tagListTmp.forEach((selectItem)=>{ + selectItem.value = [];//清空值，再进行赋值 + }); + //设置选择的值 + let labArr = othersParams.split(','); + tagListTmp.forEach((tagItem) => { + let labelName = tagItem.name; + labArr.forEach((item, index) => {//b=~'1|2|3' + let labNameTmp = item.substring(0,item.indexOf('='));//project module dc + if(labNameTmp===labelName){ + let labVal = item.substring(item.indexOf('=')+1,item.length); + if(labVal.indexOf('~')!=-1){ + labVal = labVal.substring(2,labVal.length-1); + let valArr = labVal.split('|'); + valArr.forEach((labItem, labIndex) => { + if(tagItem.value.indexOf(labItem)===-1){ tagItem.value.push(labItem); - }); - }else { - labVal = labVal.substring(1,labVal.length-1); + } + }); + }else { + labVal = labVal.substring(1,labVal.length-1); + if(tagItem.value.indexOf(labVal)===-1){ tagItem.value.push(labVal); } } - }); + } }); - //排序label顺序 - this.sortLabel(tagListTmp,this.elementInfo.selectedTagList); - - let tagNum = this.elementInfo.selectedTagList.length; - this.$nextTick(() => { - this.setLabelDivHeight(tagNum); - }); - }else{ - this.$nextTick(() => { - this.elementInfo.selectedTagList = []; - this.setLabelDivHeight(0); - }); - } - + }); + //排序label顺序 + this.sortLabel(tagListTmp,this.elementInfo.selectedTagList); + console.log('11111111111111'); + this.setLabelValueCascader(); } - }) + }else { + let match = '{project="'+projectVal+'",module="'+moduleVal+'"}'; + this.$get('/prom/api/v1/series?match[]='+match).then(res => { + if (res.status === 'success') { + let metricArr = []; + let metricArrTmp = []; + res.data.forEach((tag, i) => { + let metricName = tag.__name__; + if(metricArrTmp.indexOf(metricName)===-1){ + const childOption = { + value: metricName,//+"_par", + label: metricName, + leaf:true, + }; + metricArrTmp.push(metricName); + metricArr.push(childOption); + } + this.metricCascaderList.map((item, index) => { + if (item.value === projectCascaderVal) {//选择的project + item.children.map((innerItem, innerIndex) => { + if (innerItem.value === moduleVal && innerItem.children.length === 0) {//不重复加载 + this.$set(innerItem, 'children', metricArr); + } + }) + } + }) + + const tagsArr = Object.keys(tag);//["__name__","asset","idc","instance","job","module","project"] + let labelValList = []; + + tagsArr.forEach((tagName) => { + if (tagName !== '__name__') { + const tagObj = { + name: tagName, + list:[], + value:[]//最终选择的值 + }; + let tagValue = tag[tagName]; + const tagItem = labelValList.find(item => item.name === tagName); + if(tagItem){//metric对应的label已添加 + if(tagItem.list.indexOf(tagValue)===-1){//label对于value是否添加，没有添加，则添加 + tagItem.list .push(tagValue); + } + }else {//metric对于的label未添加 + tagObj.list.push(tagValue); + labelValList.push(tagObj); + } + } + }); + if(this.metricLabelValInfo.has(metricName)){ + let existMetricLabelList = this.metricLabelValInfo.get(metricName); + labelValList.forEach((labelItem,index)=>{ + const existTagItem = existMetricLabelList.find(item => item.name === labelItem.name); + if(existTagItem){//label已添加 + labelItem.list.forEach((valueItem,valIndex)=>{ + if(existTagItem.list.indexOf(valueItem)===-1){//value未添加 + existTagItem.list.push(valueItem); + } + }) + }else {//label未添加 + existMetricLabelList.push(labelItem); + } + }) + }else { + this.metricLabelValInfo.set(metricName,labelValList); + } + //缓存数据 + this.cacheData(projectVal,moduleVal,metricName,labelValList); + }); + + this.elementInfo.selectedTagList = []; + console.log('---response---start',this.metricLabelValInfo) + if(this.metricLabelValInfo.has(metric)){ + let tagListTmp = []; + tagListTmp = [...this.metricLabelValInfo.get(metric)];//[...this.metricList], + tagListTmp.forEach((selectItem)=>{ + selectItem.value = [];//清空值，再进行赋值 + }); + //设置选择的值 + let labArr = othersParams.split(','); + tagListTmp.forEach((tagItem) => { + let labelName = tagItem.name; + labArr.forEach((item, index) => {//b=~'1|2|3' + let labNameTmp = item.substring(0,item.indexOf('='));//project module dc + if(labNameTmp===labelName){ + let labVal = item.substring(item.indexOf('=')+1,item.length); + if(labVal.indexOf('~')!=-1){ + labVal = labVal.substring(2,labVal.length-1); + let valArr = labVal.split('|'); + valArr.forEach((labItem, labIndex) => { + if(tagItem.value.indexOf(labItem)===-1){ + tagItem.value.push(labItem); + } + }); + }else { + labVal = labVal.substring(1,labVal.length-1); + if(tagItem.value.indexOf(labVal)===-1){ + tagItem.value.push(labVal); + } + } + } + }); + }); + //排序label顺序 + this.sortLabel(tagListTmp,this.elementInfo.selectedTagList); + this.setLabelValueCascader(); + //let tagNum = this.elementInfo.selectedTagList.length; + //this.$nextTick(() => { + //this.setLabelDivHeight(tagNum); + //}); + }else{ + this.$nextTick(() => { + this.elementInfo.selectedTagList = []; + //this.setLabelDivHeight(0); + }); + } + } + }); + } }, sortLabel(tagListTmp,rltList){ this.labelSort.forEach((sortItem) => { @@ -643,6 +1133,7 @@ export default { // 编辑已有图表状态时，先填充数据 setMdata(data) { + console.log('-------data******',JSON.stringify(data)) this.setDataFlag = true; this.target = Object.assign({}, data); //this.pointer = @@ -662,7 +1153,8 @@ export default { }else { this.elementInfo.metric = expression; } - // 当该项metric为空时，重置一下 + //设置metric显示的值 + /* if (this.$refs.metricSelect) { let cascaderDiv = document.querySelector('#cascader'+this.pointer); if(cascaderDiv){ @@ -671,51 +1163,11 @@ export default { cascaderInput.firstElementChild.value = this.elementInfo.metric; } } - } + }*/ this.elementInfo.legend=this.target.legend; let labelValList = expression.substring(expression.indexOf('{')+1,expression.indexOf('}')); - this.getMetricLabelValue(this.elementInfo.metric,labelValList);//获得metric及对应label级value - /* - this.$get('/metric/series?match[]='+this.elementInfo.metric).then(response => { - this.elementInfo.selectedTagList = []; - if (response.code === 200) { - const objList = Object.entries(response.data); - objList.forEach((item) => { - const tagObj = { - name: item[0], - list:item[1], - value:[]//最终选择的值 - }; - let labelName = item[0]; - let labelValList = expression.substring(expression.indexOf('{')+1,expression.indexOf('}')); - let labArr = labelValList.split(','); - labArr.forEach((item, index) => {//b=~'1|2|3' - let labNameTmp = item.substring(0,item.indexOf('=')); - if(labNameTmp===labelName){ - let labVal = item.substring(item.indexOf('=')+1,item.length); - if(labVal.indexOf('~')!=-1){ - labVal = labVal.substring(2,labVal.length-1); - let valArr = labVal.split('|'); - valArr.forEach((labItem, labIndex) => { - tagObj.value.push(labItem); - }); - }else { - labVal = labVal.substring(1,labVal.length-1); - tagObj.value.push(labVal); - } - } - }); - - this.elementInfo.selectedTagList.push(tagObj); - }); - let tagNum = this.elementInfo.selectedTagList.length; - this.setLabelDivHeight(tagNum); - }else { - this.elementInfo.selectedTagList = []; - this.setLabelDivHeight(0); - } - });*/ + this.getMetricLabelValue(this.elementInfo.metric,labelValList);//获得metric及对应label及value } setTimeout(() => { this.$refs.scrollbar.update(); @@ -892,7 +1344,12 @@ export default { bus.$on('clear_history', () => { this.clearHistory(); }); + console.log('@#$%%',this.metricCascaderList); + //this.metricCascaderList = [...this.metricCascaderListTmp]; }, + beforeDestroy() { + }, + }; diff --git a/nezha-fronted/src/components/page/dashboard/metricSet.vue b/nezha-fronted/src/components/page/dashboard/metricSet.vue index f4114834d..834c4c5e1 100644 --- a/nezha-fronted/src/components/page/dashboard/metricSet.vue +++ b/nezha-fronted/src/components/page/dashboard/metricSet.vue @@ -1,8 +1,5 @@