From e68546dc54b78ac6bd7419f113c7135d73d5c3c4 Mon Sep 17 00:00:00 2001 From: zhangyu Date: Thu, 23 Dec 2021 15:44:27 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=20=E4=BF=AE=E6=94=B9=20=E4=BB=AA?= =?UTF-8?q?=E8=A1=A8=E7=9B=98=20=E4=B8=8D=E6=98=BE=E7=A4=BA=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98=EF=BC=8C=E4=BB=A5=E5=8F=8A=20endpointQuery?= =?UTF-8?q?=E7=9A=84=E5=85=A8=E5=B1=8F=E7=9A=84=E6=96=B0=E5=A2=9E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/chart/ChartScreenHeader.vue | 31 +- .../src/components/chart/chart/chartGauge.vue | 2 +- .../src/components/chart/chartHeaderMixin.js | 3 + .../src/components/chart/defaultLineData.js | 7 +- .../src/components/chart/defaultLogData.js | 6 +- .../src/components/chart/panelChart.vue | 15 + .../bottomBox/tabs/alertMessageTabNew.vue | 122 +------ .../common/bottomBox/tabs/endpointQuery.vue | 3 +- .../common/rightBox/chart/chartRightBox.vue | 9 +- .../common/table/special/endpointQueryTab.vue | 300 +++++++----------- .../components/page/alert/alertMessage.vue | 3 +- 11 files changed, 173 insertions(+), 328 deletions(-) diff --git a/nezha-fronted/src/components/chart/ChartScreenHeader.vue b/nezha-fronted/src/components/chart/ChartScreenHeader.vue index 1145957b6..f3d1893c1 100644 --- a/nezha-fronted/src/components/chart/ChartScreenHeader.vue +++ b/nezha-fronted/src/components/chart/ChartScreenHeader.vue @@ -34,7 +34,19 @@ - + + + + @@ -128,6 +140,23 @@ export default { return true default: return false } + }, + showUnit (type) { + switch (type) { + case 'endpointQuery' : + return true + default: return false + } + }, + showSaveBtn (type) { + switch (type) { + case 'endpointQuery' : + return true + default: return false + } + }, + saveChart () { + this.$emit('saveChart') } }, watch: { diff --git a/nezha-fronted/src/components/chart/chart/chartGauge.vue b/nezha-fronted/src/components/chart/chart/chartGauge.vue index 64c805e82..b8099a0dc 100644 --- a/nezha-fronted/src/components/chart/chart/chartGauge.vue +++ b/nezha-fronted/src/components/chart/chart/chartGauge.vue @@ -3,7 +3,7 @@
diff --git a/nezha-fronted/src/components/chart/chartHeaderMixin.js b/nezha-fronted/src/components/chart/chartHeaderMixin.js index e25e48d92..afa6e32a5 100644 --- a/nezha-fronted/src/components/chart/chartHeaderMixin.js +++ b/nezha-fronted/src/components/chart/chartHeaderMixin.js @@ -64,6 +64,9 @@ export default { }, loadMore () { this.$emit('loadMore') + }, + unitChange (val) { + this.$emit('unitChange', val) } }, watch: { diff --git a/nezha-fronted/src/components/chart/defaultLineData.js b/nezha-fronted/src/components/chart/defaultLineData.js index 648b69912..e001a0879 100644 --- a/nezha-fronted/src/components/chart/defaultLineData.js +++ b/nezha-fronted/src/components/chart/defaultLineData.js @@ -43,13 +43,12 @@ const data = { y: 12, elements: [ { - id: 85583, - chartId: 697389, + id: '', + chartId: '', expression: '', type: 'expert', legend: '', - buildIn: 0, - seq: null, + buildIn: '', name: 'A', state: 1 } diff --git a/nezha-fronted/src/components/chart/defaultLogData.js b/nezha-fronted/src/components/chart/defaultLogData.js index a8cb7b54d..813127e99 100644 --- a/nezha-fronted/src/components/chart/defaultLogData.js +++ b/nezha-fronted/src/components/chart/defaultLogData.js @@ -42,13 +42,11 @@ const data = { y: 12, elements: [ { - id: 85584, - chartId: 697389, + id: '', + chartId: '', expression: '', type: 'expert', legend: '', - buildIn: 0, - seq: null, name: 'A', state: 1 } diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue index 807cd289c..3a56581e4 100644 --- a/nezha-fronted/src/components/chart/panelChart.vue +++ b/nezha-fronted/src/components/chart/panelChart.vue @@ -10,6 +10,7 @@ :chart-info="chartInfo" :showAllData.sync="showAllData" :allDataLength="allDataLength" + @unitChange="unitChange" @loadMore="loadMore" @edit-chart="$emit('edit-chart', chartInfo)" @refresh="refresh" @@ -21,10 +22,13 @@ v-if="isFullscreen" :is-group="isGroup(chartInfo.type)" :isError="isError" + :from="from" :chartData="chartData" :chart-info="chartInfo" :showAllData.sync="showAllData" :allDataLength="allDataLength" + @unitChange="unitChange" + @saveChart="saveChart" @loadMore="loadMore" @refresh="refresh" @dateChange="dateChange" @@ -391,6 +395,17 @@ export default { this.$nextTick(() => { this.$refs.chart && this.$refs.chart.$refs['chart' + this.chartInfo.id].initChart() }) + }, + unitChange (val) { + this.$emit('update:chartInfo', 'unit', val) + this.chartInfo.unit = val + console.log(this.chartInfo.unit) + this.$nextTick(() => { + this.$refs.chart && this.$refs.chart.$refs['chart' + this.chartInfo.id].initChart() + }) + }, + saveChart () { + this.$emit('saveChart', this.chartInfo) } }, watch: { diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue index 700297ec3..001f8abd0 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue @@ -269,126 +269,6 @@ export default { this.queryDate() }) }, - queryChartDate () { - const $temp = this - const start = this.searchTime[0] ? this.searchTime[0] : getTime(-1, 'h') - const end = this.searchTime[1] ? this.searchTime[1] : getTime(0, 'h') - // const start = this.currentMsg.startAt - // const end = this.currentMsg.endAt - this.searchTime = [start, end] - const timeDiff = (new Date(end).getTime() - new Date(start).getTime()) / 1000 / (24 * 60 * 60) - let step = '15s' - if (timeDiff < 1) { - step = '15s' - } else if (timeDiff < 7) { - step = '5m' - } else if (timeDiff < 30) { - step = '10m' - } else { - step = '30m' - } - if (this.$refs.messageChart) { - this.$refs.messageChart.startLoading() - const axiosArr = [] - axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + encodeURIComponent(this.currentMsg.alertRule.expr.replace(/\r|\n+/g, '')) + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step + '&filter=' + encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels))))) - this.legend = [] - this.chartDatas = [] - axios.all(axiosArr).then(res => { - this.chartLoading = false - try { - res.forEach((response, promIndex) => { - if (response.status === 200) { - if (response.data.status === 'success') { - const queryData = response.data.data.result[0] - if (queryData) { - const chartData = { - type: 'line', - symbol: 'none', // 去掉点 - smooth: 0.2, // 曲线变平滑 - name: '', - lineStyle: { - width: 1, - opacity: 0.9 - }, - markLine: { - silent: true, - symbol: ['circle', 'circle'], - label: { - distance: this.computeDistance(chartDataFormat.getUnit(this.currentMsg.alertRule.unit ? this.currentMsg.alertRule.unit : 2).compute(this.currentMsg.alertRule.threshold)), - formatter (params) { - return chartDataFormat.getUnit($temp.currentMsg.alertRule.unit ? $temp.currentMsg.alertRule.unit : 2).compute(params.value) - } - }, - lineStyle: { - color: '#d64f40', - width: 2, - type: 'dotted' - }, - data: [{ - yAxis: Number(this.currentMsg.alertRule.threshold) - }] - }, - markArea: { - itemStyle: { - color: '#d64f40', - opacity: 0.1 - }, - data: [this.returnMarkArea()] - } - } - if (this.currentMsg.alertRule.operator == '==' || this.currentMsg.alertRule.operator == '!=') { - delete chartData.markArea - } - let alias = chartData.name - chartData.name += '{' - alias += '{' - Object.keys(queryData.metric).forEach((item, index) => { - const label = item - const value = queryData.metric[label] - chartData.name += label + "='" + value + "'," - }) - chartData.name = chartData.name.charAt(chartData.name.length - 1) == ',' ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name - chartData.name += '}' - const legend = { - name: chartData.name, - alias: chartData.name, - isGray: false - } - this.legend.push(legend) - chartData.data = queryData.values.map((dpsItem, dpsIndex) => { - return [dpsItem[0] * 1000, parseFloat(dpsItem[1]).toFixed(2)] - }) - this.chartDatas.push(chartData) - } - } else { - this.$message.error(response.data.error) - } - } else { - this.$refs.messageChart.endLoading() - this.chartLoading = false - this.isError = true - if (response.msg) { - this.errorContent = response.msg - } else if (response.error) { - this.errorContent = response.error - } else { - this.errorContent = response - } - } - }) - this.$nextTick(() => { - this.$refs.messageChart.setRandomColors(this.chartDatas.length) - this.$refs.messageChart.setLegend(this.legend) - this.$refs.messageChart.setSeries(this.chartDatas) - this.$refs.messageChart.endLoading() - }) - } catch (err) { - // this.$message.error(err) - this.$refs.messageChart.endLoading() - } - }) - } - }, del (row) { const self = this this.$confirm(this.$t('tip.confirmDelete'), { @@ -711,11 +591,13 @@ export default { const chartInfo = lodash.cloneDeep(lineData) chartInfo.elements[0].expression = encodeURIComponent(this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, '')) chartInfo.elements[0].filter = encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels))) + chartInfo.unit = this.currentMsg.unit this.showFullscreen(true, chartInfo) } else if (this.currentMsg.alertRule.type === 2) { const chartInfo = lodash.cloneDeep(logData) chartInfo.elements[0].expression = encodeURIComponent(this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, '')) chartInfo.elements[0].filter = encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels))) + chartInfo.unit = this.currentMsg.unit this.showFullscreen(true, chartInfo) } }, diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue index 4a7b671d3..1737c0b24 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue @@ -37,7 +37,8 @@
+