diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue index 2d4e21a53..1dbde1915 100644 --- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue +++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue @@ -2,7 +2,7 @@
-
+
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue index 2317f2492..1ef447978 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue @@ -179,6 +179,7 @@ import chartDataFormat from "../../../charts/chartDataFormat"; import chart from '../../../page/dashboard/overview/chart' var timeout; + var internal; export default { name: "endpointQueryTab", components: { @@ -255,7 +256,6 @@ bus.$emit("menu-change", 'panel'); this.$store.state.showPanel.id = panel.id; this.$store.state.showPanel.name = panel.name; - console.info(this.$router) this.$router.push({ path: "/panel", query: { @@ -266,10 +266,10 @@ }, tableReload() { var table = this.$refs.endpointQueryTable; - let resizeTimeout = setInterval(() => { + internal = setInterval(() => { if (!window.resizing) { table.setHeight(); - clearInterval(resizeTimeout); + clearInterval(internal); } }, 200); }, @@ -279,79 +279,81 @@ this.queryData = []; this.tableData = []; this.tableDataCopy = ''; - this.$get("/prom/api/v1/query?query={endpoint='" + this.currentEndpoint.id + "'}&time=" + this.formatTime).then(response=>{ - this.loading = false; - if(response.status==="success"){ - let results = response.data.result; - this.queryData=JSON.parse(JSON.stringify(results)); - for(let result of results) { - let metricName = result.metric.__name__; - let temp = metricName; - let simpleTemp = metricName;//显示简略信息:隐藏same labels后的结果 - let metricColor = ""; - let bracketsColor = "#eb7b18";//#eb7b18 - let labelColor = "#65bbd1";//#66d9ef - let valueColor = "#61c261";//#74e680 - let colorTemp = `${metricName}`; - let colorSimpleTemp = `${metricName}`; - let metricTip = {}; - let queryInfos = (this.elementMetricDatas.filter((item)=> { - return item.metric === temp; - })); - if(queryInfos && queryInfos.length > 0) { - metricTip = queryInfos[0]; - } else { - metricTip.metric=temp; - } - delete result.metric.__name__; - temp += "{"; - simpleTemp += "{"; - colorTemp += `{`; - colorSimpleTemp += `{`; - let keys = Object.keys(result.metric); - for (let index in keys){ - let key = keys[index]; - temp += key + "='" + result.metric[key] + "',"; - colorTemp += `${key}='${result.metric[key]}',`; - if(!this.sameLabels.some((i)=> {return i == key})) { - simpleTemp += key + "='" + result.metric[key] + "',"; - colorSimpleTemp += `${key}='${result.metric[key]}',`; + setTimeout(() => { + this.$get("/prom/api/v1/query?query={endpoint='" + this.currentEndpoint.id + "'}&time=" + this.formatTime).then(response=>{ + this.loading = false; + if(response.status==="success"){ + let results = response.data.result; + this.queryData=JSON.parse(JSON.stringify(results)); + for(let result of results) { + let metricName = result.metric.__name__; + let temp = metricName; + let simpleTemp = metricName;//显示简略信息:隐藏same labels后的结果 + let metricColor = ""; + let bracketsColor = "#eb7b18";//#eb7b18 + let labelColor = "#65bbd1";//#66d9ef + let valueColor = "#61c261";//#74e680 + let colorTemp = `${metricName}`; + let colorSimpleTemp = `${metricName}`; + let metricTip = {}; + let queryInfos = (this.elementMetricDatas.filter((item)=> { + return item.metric === temp; + })); + if(queryInfos && queryInfos.length > 0) { + metricTip = queryInfos[0]; + } else { + metricTip.metric=temp; + } + delete result.metric.__name__; + temp += "{"; + simpleTemp += "{"; + colorTemp += `{`; + colorSimpleTemp += `{`; + let keys = Object.keys(result.metric); + for (let index in keys){ + let key = keys[index]; + temp += key + "='" + result.metric[key] + "',"; + colorTemp += `${key}='${result.metric[key]}',`; + if(!this.sameLabels.some((i)=> {return i == key})) { + simpleTemp += key + "='" + result.metric[key] + "',"; + colorSimpleTemp += `${key}='${result.metric[key]}',`; + } + } + if(temp.indexOf(',') != -1){ + temp = temp.substr(0,temp.length-1); + } + if(simpleTemp.indexOf(',') != -1){ + simpleTemp = simpleTemp.substr(0,simpleTemp.length-1); + } + if(colorTemp.indexOf(',') != -1){ + colorTemp = colorTemp.substr(0,colorTemp.length-1); + } + if(colorSimpleTemp.indexOf(',') != -1){ + colorSimpleTemp = colorSimpleTemp.substr(0,colorSimpleTemp.length-1); } - } - if(temp.indexOf(',') != -1){ - temp = temp.substr(0,temp.length-1); - } - if(simpleTemp.indexOf(',') != -1){ - simpleTemp = simpleTemp.substr(0,simpleTemp.length-1); - } - if(colorTemp.indexOf(',') != -1){ - colorTemp = colorTemp.substr(0,colorTemp.length-1); - } - if(colorSimpleTemp.indexOf(',') != -1){ - colorSimpleTemp = colorSimpleTemp.substr(0,colorSimpleTemp.length-1); - } - temp += "}"; - simpleTemp += "}"; - colorTemp += `}`; - colorSimpleTemp += `}`; - if(!/.+\{.+\}/.test(simpleTemp)) { - simpleTemp = simpleTemp.substr(0,simpleTemp.length-2); - } + temp += "}"; + simpleTemp += "}"; + colorTemp += `}`; + colorSimpleTemp += `}`; + if(!/.+\{.+\}/.test(simpleTemp)) { + simpleTemp = simpleTemp.substr(0,simpleTemp.length-2); + } - if(!/.+\{<\/span>.+?\}/.test(colorSimpleTemp)){ - let metricReg=new RegExp(""+metricName+"<\/span>") - colorSimpleTemp=metricReg.exec(colorSimpleTemp)[0]; - } + if(!/.+\{<\/span>.+?\}/.test(colorSimpleTemp)){ + let metricReg=new RegExp(""+metricName+"<\/span>") + colorSimpleTemp=metricReg.exec(colorSimpleTemp)[0]; + } - let edpQueryData={element:temp,simpleElement:simpleTemp,colorElement:colorTemp,colorSimpleElement:colorSimpleTemp, value:result.value[1],type:(result.metric.type?result.metric.type:'2'),metricTip:metricTip}; - this.tableData.push(edpQueryData); + let edpQueryData={element:temp,simpleElement:simpleTemp,colorElement:colorTemp,colorSimpleElement:colorSimpleTemp, value:result.value[1],type:(result.metric.type?result.metric.type:'2'),metricTip:metricTip}; + this.tableData.push(edpQueryData); + } + this.tableDataCopy = JSON.stringify(this.tableData); + this.$nextTick(this.$refs.endpointQueryTable.doLayout()); } - this.tableDataCopy = JSON.stringify(this.tableData); - this.$nextTick(this.$refs.endpointQueryTable.doLayout()); - } - }); + }); + }, 420); }, clearSelectedMetrics() { this.$refs.endpointQueryTable.clearSelection(); diff --git a/nezha-fronted/src/tools.js b/nezha-fronted/src/tools.js index da2537434..7016ff242 100644 --- a/nezha-fronted/src/tools.js +++ b/nezha-fronted/src/tools.js @@ -258,6 +258,7 @@ export const bottomBoxWindow = { } }, exitFullScreen(vm) { + window.resizing = true; let contentRightDom = document.querySelector(".content-right"); //右侧内容区 let contentRightHeight = contentRightDom.offsetHeight;//可视高度 //主列表 @@ -273,9 +274,11 @@ export const bottomBoxWindow = { if (document.querySelector(".sub-list").offsetHeight >= 100) { vm.subResizeShow = true; } + window.resizing = false; }, 210); }, fullScreen(vm) { + window.resizing = true; let contentRightDom = document.querySelector(".content-right"); //右侧内容区 let contentRightHeight = contentRightDom.offsetHeight;//可视高度 vm.isFullScreen = true; @@ -285,6 +288,7 @@ export const bottomBoxWindow = { vm.mainResizeShow = false; //副列表 document.querySelector(".sub-list").style.height = contentRightHeight + 'px'; + window.resizing = false; }, showSubListWatch(vm, n) { vm.inTransform = n;