diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue index ef312f6f5..776de13bc 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue @@ -107,7 +107,7 @@ - + @@ -167,21 +167,27 @@ this.rightBox.show = true; this.$nextTick(() => { this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle")); - this.$refs.addChartModal.show(true); - let metricInfo = {}; - metricInfo.elements = []; - //console.info("aaa", this.selectedEndpoints) - for(let i = 0; i < this.selectedEndpoints.length; i++) { - let type = 'expert'; - // if (this.selectedEndpoints[i].type == '1') { - // type = 'expert'; - // } else if (this.selectedEndpoints[i].type == '2') { - // type = 'normal'; - // } - metricInfo.elements.push({expression: this.selectedEndpoints[i].element, type: type}); + let chart = { + id:'', + title: '', + type:'line', + span:12, + height:'400', + unit: this.chartUnit, + param:{ + url:'', + threshold:'', + }, + elements:[], + panel: '', + sync: 0 + }; + for (let i = 0; i < this.selectedEndpoints.length; i++) { + if (this.selectedEndpoints[i] && this.selectedEndpoints[i].element != '') { + chart.elements.push({chartId: "", expression: this.selectedEndpoints[i].element, type: 'expert'}); + } } - this.$refs.addChartModal.createData(-1, metricInfo); - this.$refs.addChartModal.setUnit(this.chartUnit) + this.$refs.addChartModal.editData(chart); }); }, dropdownHandler(show) { diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue index ad8470490..3edec281e 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue @@ -67,7 +67,7 @@ - + @@ -217,9 +217,11 @@ }, // 编辑图表信息,打开编辑弹窗 editData(data) { - this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.editChartTitle")); - this.$refs.addChartModal.show(true); - this.$refs.addChartModal.editData(data, this.panelId); + this.rightBox.show = true; + this.$nextTick(() => { + this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.editChartTitle")); + this.$refs.addChartModal.editData(data, this.panelId); + }); }, // 移除图表:弹出确认框询问 removeData(data,from) { diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue index 6e00f6d20..01c323c57 100644 --- a/nezha-fronted/src/components/page/dashboard/chartBox.vue +++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue @@ -172,7 +172,7 @@
{{$t('alert.config.expr')}} - +
{{$t('dashboard.panel.chartForm.alertParam.param')}}
@@ -181,7 +181,7 @@ - + - @@ -299,12 +279,46 @@ show: false, title: this.$t('dashboard.panel.createChartTitle'), }, - + statisticsList:[ + { + id:"min", + name:this.$t("dashboard.panel.chartForm.statisticsVal.min") + }, + { + id:"max", + name:this.$t("dashboard.panel.chartForm.statisticsVal.max") + }, + { + id:"average", + name:this.$t("dashboard.panel.chartForm.statisticsVal.average") + }, + { + id:"total", + name:this.$t("dashboard.panel.chartForm.statisticsVal.total") + }, + { + id:"first", + name:this.$t("dashboard.panel.chartForm.statisticsVal.first") + }, + { + id:"last", + name:this.$t("dashboard.panel.chartForm.statisticsVal.last") + }, + { + id:"range", + name:this.$t("dashboard.panel.chartForm.statisticsVal.range") + }, + { + id:"different", + name:this.$t("dashboard.panel.chartForm.statisticsVal.different") + }, + ], promqlCount: 1, promqlKeys: [], elementIds: [], expressions: [], legends: [], + statistics: "", editInfo: {}, chart: { @@ -531,15 +545,8 @@ esc() { this.rightBox.show = false; setTimeout(() => { - this.$parent.rightBox.show = false; + this.$emit("close"); }, 200); - /*if (this.rightBox.show) { - this.rightBox.show = false; - //this.editParamBox.show = false; - this.$refs.chartForm.resetFields();//清空表单 - this.panelName2 = ''; - this.chart.id='';//不清除，再次打开创建图表，会显示删除按钮 - }*/ }, /*metric部分相关方法--begin*/ @@ -721,10 +728,14 @@ sync: this.chart.sync }; if(this.chart.type === 'singleStat'){ - params.param.statistics=target.statistics; + params.param.statistics=this.statistics; + } else { + delete params.param.statistics; } if(this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea'){ params.param.threshold=this.chart.param.threshold; + } else { + delete params.param.threshold; } //生成指标数组 const elements = []; @@ -806,6 +817,11 @@ item.saveTarget(index); }); }*/ + if(this.chart.type == 'singleStat'){ + this.$set(this.chart.param, "statistics", this.statistics); + } else { + delete this.chart.param.statistics; + } if (this.expressions[0]) { this.chart.elements = []; this.expressions.forEach((expr, i) => { @@ -921,9 +937,7 @@ }); } else { - console.log(this.$refs) this.$nextTick(() => { - this.$refs.chartTag[0].setMdata(elementInfo.elements[0]); }); } @@ -956,11 +970,16 @@ // 编辑chart时使用, set_tdata editData(data, panelId) { //alert('data='+JSON.stringify(data)+"=="+panelId); - this.panelId = panelId; - let temp = this.panelData.filter((item) => { - return item.id == panelId; - }); - this.panelName2 = temp[0].name; + if (!panelId) { + this.panelId = 0; + this.panelName2 = ""; + } else { + this.panelId = panelId; + let temp = this.panelData.filter((item) => { + return item.id == panelId; + }); + this.panelName2 = temp[0].name; + } this.isedit = true; //this.chartModal = true; this.editInfo = data; @@ -976,27 +995,14 @@ this.chart.param.url = data.param.url; this.setIsUrl(); //this.elements = [1]; - }else if(this.chart.type==='singleStat'){ - this.setIsSingleStat(); - /*this.elements = []; - bus.chartAddInfo.metricTarget = []; - data.elements.forEach((item, index) => { - this.elements.push(index); - }); - this.$nextTick(() => { - const cSet = this.$refs.chartTag; - // 派发charttag数据 - cSet.forEach((item, index) => { - item.setMdata(data.elements[index],data.param.statistics); - }); - });*/ }else if(this.chart.type==='alertLine'){ this.chart.param=data.param; this.setIsAlertList(); //this.elements=[1]; }else{ - if((this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea')&&data.param){ + if((this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea'||this.chart.type==='singleStat')&&data.param){ this.chart.param.threshold=data.param.threshold; + this.chart.param.statistics = this.statistics = data.param.statistics; }else{ this.chart.param.threshold=''; } @@ -1077,16 +1083,11 @@ item.setNotSingleStat(); }); }*/ - }else if(chartType==='singleStat'){ - this.elements = [1]; - this.setIsSingleStat(); - /*if(this.$refs.chartTag){ - this.$refs.chartTag.forEach((item, index) => { - item.setSingleStat(); - }); - }*/ }else if(chartType === 'alertList'){ this.setIsAlertList(); + }else if(chartType === 'singleStat'){ + this.setIsSingleStat(); + this.resetElements(); }else { this.setIsOtherChart(); if(chartType === 'bar'||chartType === 'line'||chartType === 'stackArea'){ @@ -1099,6 +1100,12 @@ }*/ } }, + resetElements() { + this.promqlKeys = [""]; + this.expressions = [""]; + this.legends = []; + this.elementIds = []; + }, /*panel搜索建议*/ panelSuggestion(queryString, callback) { let data = []; diff --git a/nezha-fronted/src/components/page/dashboard/explore/explore.vue b/nezha-fronted/src/components/page/dashboard/explore/explore.vue index ec51e3a30..5989ec042 100644 --- a/nezha-fronted/src/components/page/dashboard/explore/explore.vue +++ b/nezha-fronted/src/components/page/dashboard/explore/explore.vue @@ -193,7 +193,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c - + { + this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle")); + let chart = { + id:'', + title: '', + type:'line', + span:12, + height:'400', + unit: this.chartUnit, + param:{ + url:'', + threshold:'', + }, + elements:[], + panel: '', + sync: 0 + }; + for (let i = 0; i < this.expressions.length; i++) { + if (this.expressions[i] != '') { + chart.elements.push({chartId: "", expression: this.expressions[i], type: 'expert'}); + } } - } - this.$refs.addChartModal.createData(-1, metricInfo); - this.$refs.addChartModal.setUnit(this.chartUnit) + this.$refs.addChartModal.editData(chart); + }); }, createSuccess(type, response, param, panel) { //添加chart成功 this.$confirm(this.$t("dashboard.metric.goPanelTip"), this.$t("tip.saveSuccess"), { diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue index dad67480f..77bf47c8d 100644 --- a/nezha-fronted/src/components/page/dashboard/panel.vue +++ b/nezha-fronted/src/components/page/dashboard/panel.vue @@ -104,7 +104,7 @@ - + diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue index 4d51d26b1..70d1e4224 100644 --- a/nezha-fronted/src/components/page/project/project.vue +++ b/nezha-fronted/src/components/page/project/project.vue @@ -46,11 +46,11 @@ @@ -195,7 +195,7 @@ vm = this; return { loading: false, - + ready: false, assetDetail: {}, //asset详情 endpointDetail: [], targetTab: '', @@ -782,10 +782,9 @@ if (pageSize) { this.endpointPageObj.pageSize = pageSize } - //this.detailProjectInfo(); - // setTimeout(()=>{ - // this.getEndpointTableData(); - // }, 200); + setTimeout(() => { + this.ready = true; + }, 300); this.$nextTick(() => { //绑定滚动条事件，控制top按钮 let el = this.$refs.endpointTable.$el.querySelector(".el-table__body-wrapper"); @@ -830,6 +829,23 @@ moduleListReloadWatch() { return this.$store.state.moduleListChange; }, + itemTip() { + return function(id, content, ready) { + let className = "item-tip-show"; + this.$nextTick(() => { + if (ready) { + let cellDom = document.querySelector(`#module-${id}`); + let spanDom = document.querySelector(`#module-${id}>span`); + if (cellDom.offsetWidth - 16 <= spanDom.offsetWidth) { + document.querySelector(`#module-${id}>.el-popover`).classList.add(className); + } else { + document.querySelector(`#module-${id}>.el-popover`).classList.remove(className); + } + } + }); + return ""; + } + }, }, watch: { currentProjectChange:{ @@ -1071,6 +1087,17 @@ .sub-side-bar-menu-edit{ margin-right: 18px; } + + .item-tip-hide { + display: none; + position: absolute; + bottom: 34px; + min-width: 50px; + white-space: normal; + } + .item-tip:hover>.item-tip-show { + display: block; + }