From 70b25a86b1c8f49b09c33fb2f8ba25523009d7bf Mon Sep 17 00:00:00 2001 From: zhangyu Date: Wed, 22 Dec 2021 20:06:59 +0800 Subject: [PATCH 1/6] =?UTF-8?q?fix=EF=BC=9A=20=E6=B7=BB=E5=8A=A0=20?= =?UTF-8?q?=E5=85=A8=E5=B1=8F=E5=90=8C=E6=AF=94(=E6=9A=82=E6=9C=AA?= =?UTF-8?q?=E8=AE=A1=E7=AE=97=E5=B7=AE=E5=80=BC)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nezha-fronted/src/components/chart/chart.vue | 6 +- .../chart/chart/chartTimeSeries.vue | 18 ++++- .../src/components/chart/chartMixin.js | 25 +++++-- .../src/components/chart/panelChart.vue | 66 +++++++++++++++---- 4 files changed, 96 insertions(+), 19 deletions(-) diff --git a/nezha-fronted/src/components/chart/chart.vue b/nezha-fronted/src/components/chart/chart.vue index 709875da0..995e2012a 100644 --- a/nezha-fronted/src/components/chart/chart.vue +++ b/nezha-fronted/src/components/chart/chart.vue @@ -10,6 +10,8 @@ :chart-info="chartInfo" :chart-option="chartOption" :is-fullscreen="isFullscreen" + :minusTime="minusTime" + :multipleTime="multipleTime" @chartIsNoData="chartIsNoData" > { + console.log(item) + const seriesName = item.seriesName.split('-')[0] if (i === 0) { const value = bus.computeTimezone(item.data[0] * 1000) const tData = new Date(value) @@ -153,6 +160,15 @@ export default { str += bus.timeFormate(tData) str += '' } + if (flag && item.seriesName.indexOf('Previous') !== -1) { + flag = false + const value = bus.computeTimezone(item.data[0] * 1000 - self.minusTime) + const tData = new Date(value) + str += '
' + str += '
' + str += bus.timeFormate(tData) + str += '
' + } const color = self.colorList[item.seriesIndex] const previousItem = params.find((series) => ('Previous ' + item.seriesName) === series.seriesName) let paramsDot = bus.countDecimals(item.data[1]) @@ -184,7 +200,7 @@ export default {
- ${item.seriesName} + ${seriesName}
${chartDataFormat.getUnit(self.chartInfo.unit ? self.chartInfo.unit : 2).compute(val, null, -1, paramsDot)} diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js index ef4b150c2..0b451367e 100644 --- a/nezha-fronted/src/components/chart/chartMixin.js +++ b/nezha-fronted/src/components/chart/chartMixin.js @@ -1,6 +1,7 @@ import lodash from 'lodash' import { getMetricTypeValue } from '@/components/common/js/tools' import { getChart, getMousePoint, setChart } from '@/components/common/js/common' +import { randomcolor } from '@/components/common/js/radomcolor/randomcolor' export default { data () { return { @@ -40,10 +41,10 @@ export default { let colorIndex = 0 originalDatas.forEach((originalData, expressionIndex) => { originalData.forEach((data, dataIndex) => { - if (colorIndex >= 20 && !this.showAllData) { - colorIndex++ - return - } + // if (colorIndex >= 20 && !this.showAllData) { + // colorIndex++ + // return + // } this.isNoData = false const s = lodash.cloneDeep(seriesTemplate) if (s) { @@ -77,8 +78,15 @@ export default { return series }, // 单个legend - handleLegend (chartInfo, data, expressionIndex, dataIndex, colorIndex) { + handleLegend (chartInfo, data, expressionIndexs, dataIndex, colorIndex) { + let expressionIndex = expressionIndexs let legend = '' // up + let alias = '' + if (expressionIndex >= chartInfo.elements.length) { + expressionIndex -= chartInfo.elements.length + legend += 'Previous ' + alias += 'Previous ' + } if (data.metric.__name__) { legend += `${data.metric.__name__}{` } @@ -98,7 +106,7 @@ export default { legend = chartInfo.elements[expressionIndex].expression } // 处理legend别名 - let alias = chartInfo.datasource === 'system' ? '' : this.handleLegendAlias(legend, chartInfo.elements[expressionIndex].legend) + alias = chartInfo.datasource === 'system' ? '' : (alias + this.handleLegendAlias(legend, chartInfo.elements[expressionIndex].legend)) if (!alias) { alias = legend } @@ -113,6 +121,11 @@ export default { return { type, value: getMetricTypeValue(data.values, type) } }) } + if (colorIndex > 20) { + const colorRandom = randomcolor() + this.colorList.push(colorRandom) + this.chartOption.color.push(colorRandom) + } this.legends.push({ name, alias, statistics, color: this.colorList[colorIndex] }) return { name, diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue index f5348bf89..7b28e59ef 100644 --- a/nezha-fronted/src/components/chart/panelChart.vue +++ b/nezha-fronted/src/components/chart/panelChart.vue @@ -35,6 +35,8 @@ :from="from" :isError="isError" :loading="loading" + :minusTime="minusTime" + :multipleTime="multipleTime" :is-fullscreen="isFullscreen" v-if="!isGroup(chartInfo.type) || !chartInfo.param.collapse" > @@ -74,7 +76,8 @@ export default { chartData: [], loading: true, isError: false, - MultipleTime: false + multipleTime: false, + minusTime: '' } }, computed: { @@ -87,8 +90,8 @@ export default { }, methods: { isGroup, - dateChange (filter, MultipleTime) { - console.log(filter, MultipleTime) + dateChange (filter, multipleTime) { + console.log(filter, multipleTime) this.loading = true // TODO assetInfo、endpointInfo、echarts等进行不同的处理 let startTime = filter.start_time @@ -97,6 +100,14 @@ export default { startTime = this.$stringTimeParseToUnix(startTime) endTime = this.$stringTimeParseToUnix(endTime) const elements = this.chartInfo.elements || [] + if (multipleTime.length) { + const minusTime = (new Date(filter.start_time).getTime() - new Date(multipleTime[0]).getTime()) + this.minusTime = minusTime + this.multipleTime = true + } else { + this.minusTime = '' + this.multipleTime = false + } this.chartInfo.loaded && this.query(elements, startTime, endTime, step) }, // 参数 isRefresh 标识是否是刷新操作 @@ -138,7 +149,7 @@ export default { } else if (this.chartInfo.datasource === 'logs') { urlPre += '/logs/loki' } - const requests = elements.map((element) => { + let requests = elements.map((element) => { if (this.from === fromRoute.chartTemp) { return chartTempData } @@ -152,15 +163,48 @@ export default { query += `&query=${element.expression}` return this.$get(query) }) - + if (this.multipleTime) { + console.log(123) + const multipleRequests = elements.map((element) => { + if (this.from === fromRoute.chartTemp) { + return chartTempData + } + let query = `${urlPre}/api/v1/query_range?start=${startTime - this.minusTime / 1000}&end=${endTime - this.minusTime / 1000}&step=${step}` + if (isTimeSeries(this.chartInfo.type)) { + query += `&nullType=${this.chartInfo.param.nullType || 'null'}` + } + // if (isChartPie(this.chartInfo.type)) { + // query += `&statistics=${this.chartInfo.param.statistics || 'last'}` + // } + query += `&query=${element.expression}` + return this.$get(query) + }) + requests = requests.concat(multipleRequests) + console.log(requests) + } const chartData = [] - axios.all(requests).then(res => { - res.forEach(r => { - if (r.status === 'success') { - chartData.push(r.data.result) + axios.all(requests).then((res) => { + res.forEach((r, rIndex) => { + if (rIndex < elements.length) { + if (r.status === 'success') { + chartData.push(r.data.result) + } else { + chartData.push({ error: r.msg || r.error || r }) + this.isError = true + } } else { - chartData.push({ error: r.msg || r.error || r }) - this.isError = true + if (r.status === 'success') { + console.log(r.data.result) + r.data.result.forEach(item => { + item.values.forEach(values => { + values[0] = values[0] + this.minusTime / 1000 + }) + }) + chartData.push(r.data.result) + } else { + chartData.push({ error: r.msg || r.error || r }) + this.isError = true + } } }) this.chartData = chartData From e2733f9710a706b33d0054f9cdb460b41fdb9b60 Mon Sep 17 00:00:00 2001 From: zhangyu Date: Thu, 23 Dec 2021 09:33:02 +0800 Subject: [PATCH 2/6] =?UTF-8?q?fix=EF=BC=9A=20=E5=90=8C=E6=AF=94=20?= =?UTF-8?q?=E8=AE=A1=E7=AE=97=E5=B7=AE=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nezha-fronted/src/components/chart/chart/chartTimeSeries.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue index a5f204d48..07e9b7f09 100644 --- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue +++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue @@ -182,7 +182,8 @@ export default { let previousDom = '' if (previousItem) { - const previousVal = formatScientificNotation(item.data[1], paramsDot) + const previousVal = formatScientificNotation(previousItem.data[1], paramsDot) + // console.log(previousVal, item.data[1]) let minusVal = 0 let operator if (previousVal <= val) { From 8c46345aa14aae8fcbb2edda8b7d24f2b464dfed Mon Sep 17 00:00:00 2001 From: zhangyu Date: Thu, 23 Dec 2021 10:44:30 +0800 Subject: [PATCH 3/6] =?UTF-8?q?feat=EF=BC=9A=20=E6=B7=BB=E5=8A=A0=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E6=9B=B4=E5=A4=9A=E7=9A=84=E9=80=89=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/chart/ChartScreenHeader.vue | 40 ++++----- nezha-fronted/src/components/chart/chart.vue | 7 +- .../chart/chart/chartTimeSeries.vue | 2 +- .../src/components/chart/chartHeader.vue | 81 ++++--------------- .../src/components/chart/chartHeaderMixin.js | 79 ++++++++++++++++++ .../src/components/chart/chartMixin.js | 16 ++-- .../src/components/chart/panelChart.vue | 32 +++++++- 7 files changed, 157 insertions(+), 100 deletions(-) create mode 100644 nezha-fronted/src/components/chart/chartHeaderMixin.js diff --git a/nezha-fronted/src/components/chart/ChartScreenHeader.vue b/nezha-fronted/src/components/chart/ChartScreenHeader.vue index 66c72218c..c61eed4d9 100644 --- a/nezha-fronted/src/components/chart/ChartScreenHeader.vue +++ b/nezha-fronted/src/components/chart/ChartScreenHeader.vue @@ -13,6 +13,19 @@ + + +
{{$t('dashboard.panel.moreTitle')}}{{$t('dashboard.panel.showAll')}}{{allDataLength}}
+ + + + + +
{{chartInfo.name}}
@@ -33,25 +46,10 @@ diff --git a/nezha-fronted/src/components/chart/chartHeaderMixin.js b/nezha-fronted/src/components/chart/chartHeaderMixin.js new file mode 100644 index 000000000..e25e48d92 --- /dev/null +++ b/nezha-fronted/src/components/chart/chartHeaderMixin.js @@ -0,0 +1,79 @@ +export default { + props: { + chartInfo: Object, + from: String, + isGroup: { + type: Boolean, + default: false + }, + error: { + type: String, + default: '' + }, + isError: { + type: Boolean, + default: false + }, + chartData: {}, + showAllData: { + type: Boolean, + default: false + }, + allDataLength: { + type: Number, + default: 0 + } + }, + data () { + return { + dropdownMenuShow: false, + errorText: '' + } + }, + methods: { + showFullscreen () { + this.$emit('showFullscreen', true) + }, + refreshChart () { + this.$emit('refresh') + }, + editChart () { + // this.$emit('edit-chart', this.chartInfo) + this.$store.dispatch('dispatchEditChart', { + chart: this.chartInfo, + type: 'edit' + }) + }, + removeChart () { + this.$store.dispatch('dispatchDelChart', { + chart: this.chartInfo, + type: 'delete' + }) + }, + duplicate () { + this.$store.dispatch('dispatchEditChart', { + chart: this.chartInfo, + type: 'duplicate' + }) + }, + clickos () { + this.dropdownMenuShow = false + }, + groupShow () { + this.$emit('groupShow', !this.chartInfo.param.collapse) + }, + loadMore () { + this.$emit('loadMore') + } + }, + watch: { + isError: { + immediate: true, + handler (n) { + if (n) { + this.errorText = this.chartData.filter(item => item.error).map(item => item.error).join('\n') + } + } + } + } +} diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js index 0b451367e..3fe36c118 100644 --- a/nezha-fronted/src/components/chart/chartMixin.js +++ b/nezha-fronted/src/components/chart/chartMixin.js @@ -15,14 +15,17 @@ export default { }, chartId: '', isNoData: true, - showAllData: false } }, props: { chartInfo: Object, chartData: Array, chartOption: Object, - isFullscreen: Boolean + isFullscreen: Boolean, + showAllData: { + type: Boolean, + default: false + } }, computed: { filterTime () { @@ -41,10 +44,11 @@ export default { let colorIndex = 0 originalDatas.forEach((originalData, expressionIndex) => { originalData.forEach((data, dataIndex) => { - // if (colorIndex >= 20 && !this.showAllData) { - // colorIndex++ - // return - // } + console.log(this.showAllData) + if (colorIndex >= 20 && !this.showAllData) { + colorIndex++ + return + } this.isNoData = false const s = lodash.cloneDeep(seriesTemplate) if (s) { diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue index 7b28e59ef..467c6030f 100644 --- a/nezha-fronted/src/components/chart/panelChart.vue +++ b/nezha-fronted/src/components/chart/panelChart.vue @@ -8,6 +8,9 @@ :isError="isError" :chartData="chartData" :chart-info="chartInfo" + :showAllData.sync="showAllData" + :allDataLength="allDataLength" + @loadMore="loadMore" @edit-chart="$emit('edit-chart', chartInfo)" @refresh="refresh" @groupShow="groupShow" @@ -20,6 +23,9 @@ :isError="isError" :chartData="chartData" :chart-info="chartInfo" + :showAllData.sync="showAllData" + :allDataLength="allDataLength" + @loadMore="loadMore" @refresh="refresh" @dateChange="dateChange" @close="showFullscreen" @@ -38,6 +44,7 @@ :minusTime="minusTime" :multipleTime="multipleTime" :is-fullscreen="isFullscreen" + :showAllData="showAllData" v-if="!isGroup(chartInfo.type) || !chartInfo.param.collapse" >
@@ -77,7 +84,9 @@ export default { loading: true, isError: false, multipleTime: false, - minusTime: '' + minusTime: '', + showAllData: false, + allDataLength: 0 } }, computed: { @@ -139,6 +148,7 @@ export default { }, query (elements, startTime, endTime, step) { this.isError = false + this.allDataLength = 0 try { switch (this.chartInfo.datasource) { case 'metrics': @@ -187,6 +197,9 @@ export default { res.forEach((r, rIndex) => { if (rIndex < elements.length) { if (r.status === 'success') { + r.data.result.forEach(item => { + this.allDataLength++ + }) chartData.push(r.data.result) } else { chartData.push({ error: r.msg || r.error || r }) @@ -196,6 +209,7 @@ export default { if (r.status === 'success') { console.log(r.data.result) r.data.result.forEach(item => { + this.allDataLength++ item.values.forEach(values => { values[0] = values[0] + this.minusTime / 1000 }) @@ -360,6 +374,21 @@ export default { this.groupInit() bus.$emit('groupMove', '', '', true) this.$emit('groupShow', this.chartInfo) + }, + showMultiple (type) { + switch (type) { + case 'line' : + case 'area' : + case 'point' : + return true + default: return false + } + }, + loadMore () { + this.showAllData = true + this.$nextTick(() => { + this.$refs.chart && this.$refs.chart.$refs['chart' + this.chartInfo.id].initChart() + }) } }, watch: { @@ -378,6 +407,7 @@ export default { }, mounted () { this.chartInfo.loaded && this.getChartData() + this.showAllData = !this.showMultiple(this.chartInfo.type) } } From db89eb8417421b0b87ed9e640d996a633ab10a82 Mon Sep 17 00:00:00 2001 From: zhangyu Date: Thu, 23 Dec 2021 11:29:29 +0800 Subject: [PATCH 4/6] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=20legend?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=E4=B8=8D=E6=AD=A3=E5=B8=B8=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/chart/ChartScreenHeader.vue | 1 - .../src/components/chart/chart/chartTimeSeries.vue | 1 - nezha-fronted/src/components/chart/chartHeader.vue | 2 +- nezha-fronted/src/components/chart/chartList.vue | 3 --- nezha-fronted/src/components/chart/chartMixin.js | 8 +++++++- nezha-fronted/src/components/chart/panelChart.vue | 4 ---- .../src/components/common/mixin/routerPathParams.js | 1 - nezha-fronted/src/components/page/dashboard/panel.vue | 10 +++++----- 8 files changed, 13 insertions(+), 17 deletions(-) diff --git a/nezha-fronted/src/components/chart/ChartScreenHeader.vue b/nezha-fronted/src/components/chart/ChartScreenHeader.vue index c61eed4d9..1145957b6 100644 --- a/nezha-fronted/src/components/chart/ChartScreenHeader.vue +++ b/nezha-fronted/src/components/chart/ChartScreenHeader.vue @@ -73,7 +73,6 @@ export default { this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType) this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss') this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss') - console.log(this.filter) this.filter.value = this.searchTime[2] this.filter.id = this.$refs.pickTime.$refs.timePicker.showTime.id setTimeout(() => { diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue index 38b435245..d597c3b3d 100644 --- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue +++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue @@ -69,7 +69,6 @@ export default { }, methods: { initChart (chartOption = this.chartOption) { - console.log(123) this.legends = [] chartOption.series = this.handleTimeSeries(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends if (this.isNoData) { diff --git a/nezha-fronted/src/components/chart/chartHeader.vue b/nezha-fronted/src/components/chart/chartHeader.vue index 17c1ee7c1..9f583d324 100644 --- a/nezha-fronted/src/components/chart/chartHeader.vue +++ b/nezha-fronted/src/components/chart/chartHeader.vue @@ -13,7 +13,7 @@ - + item.id == group.id) if (group && groupFind) { @@ -300,7 +298,6 @@ export default { let top = dom.style.transform.split(',')[1] top = top.substring(0, top.length - 2) const mainOffsetTop = top - this.stepWidth + 14// transform: grid组件 通过 tranfrom 控制位置 中间的为y的值 通过截取获得 - 父元素 marginTop的 值。 - console.log(mainOffsetTop) // 2.元素的高度 const mainHeight = itemHeight // ele.offsetHeight;//itemHeight; // 3.页面滚动的距离 diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js index 3fe36c118..53323d747 100644 --- a/nezha-fronted/src/components/chart/chartMixin.js +++ b/nezha-fronted/src/components/chart/chartMixin.js @@ -44,7 +44,6 @@ export default { let colorIndex = 0 originalDatas.forEach((originalData, expressionIndex) => { originalData.forEach((data, dataIndex) => { - console.log(this.showAllData) if (colorIndex >= 20 && !this.showAllData) { colorIndex++ return @@ -114,6 +113,9 @@ export default { if (!alias) { alias = legend } + if (alias == 'Previous ') { + alias += legend + } // proj_status_ const name = alias + '-' + dataIndex @@ -130,6 +132,7 @@ export default { this.colorList.push(colorRandom) this.chartOption.color.push(colorRandom) } + // console.log(name, alias, statistics) this.legends.push({ name, alias, statistics, color: this.colorList[colorIndex] }) return { name, @@ -150,6 +153,9 @@ export default { }) return labelValue } else { + if (!aliasExpression) { + return '' + } return aliasExpression } }, diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue index 467c6030f..46e251500 100644 --- a/nezha-fronted/src/components/chart/panelChart.vue +++ b/nezha-fronted/src/components/chart/panelChart.vue @@ -100,7 +100,6 @@ export default { methods: { isGroup, dateChange (filter, multipleTime) { - console.log(filter, multipleTime) this.loading = true // TODO assetInfo、endpointInfo、echarts等进行不同的处理 let startTime = filter.start_time @@ -174,7 +173,6 @@ export default { return this.$get(query) }) if (this.multipleTime) { - console.log(123) const multipleRequests = elements.map((element) => { if (this.from === fromRoute.chartTemp) { return chartTempData @@ -190,7 +188,6 @@ export default { return this.$get(query) }) requests = requests.concat(multipleRequests) - console.log(requests) } const chartData = [] axios.all(requests).then((res) => { @@ -207,7 +204,6 @@ export default { } } else { if (r.status === 'success') { - console.log(r.data.result) r.data.result.forEach(item => { this.allDataLength++ item.values.forEach(values => { diff --git a/nezha-fronted/src/components/common/mixin/routerPathParams.js b/nezha-fronted/src/components/common/mixin/routerPathParams.js index 980c2b271..7483a3c67 100644 --- a/nezha-fronted/src/components/common/mixin/routerPathParams.js +++ b/nezha-fronted/src/components/common/mixin/routerPathParams.js @@ -12,7 +12,6 @@ export default { setTimeout(() => { this.setSearchInput(val, qv) }, 200) - console.log() qv && this.$set(val.target, val.propertyName, qv) }) }, diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue index cb0385c0b..a2bf97539 100644 --- a/nezha-fronted/src/components/page/dashboard/panel.vue +++ b/nezha-fronted/src/components/page/dashboard/panel.vue @@ -34,11 +34,11 @@
-
- - - -
+ + + + + From 3454dc76cee2ffcbb3f089e30b31b838faa7f3f4 Mon Sep 17 00:00:00 2001 From: zhangyu Date: Thu, 23 Dec 2021 14:03:38 +0800 Subject: [PATCH 5/6] =?UTF-8?q?feat=EF=BC=9A=20=E6=9B=B4=E6=8D=A2=20alertm?= =?UTF-8?q?essage=E7=9A=84=20=E5=9B=BE=E8=A1=A8=E7=9A=84=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/chart/defaultLineData.js | 111 ++++++++++++++++++ .../src/components/chart/defaultLogData.js | 110 +++++++++++++++++ .../src/components/chart/panelChart.vue | 3 + .../components/page/alert/alertMessage.vue | 106 +++++++++++------ 4 files changed, 293 insertions(+), 37 deletions(-) create mode 100644 nezha-fronted/src/components/chart/defaultLineData.js create mode 100644 nezha-fronted/src/components/chart/defaultLogData.js diff --git a/nezha-fronted/src/components/chart/defaultLineData.js b/nezha-fronted/src/components/chart/defaultLineData.js new file mode 100644 index 000000000..648b69912 --- /dev/null +++ b/nezha-fronted/src/components/chart/defaultLineData.js @@ -0,0 +1,111 @@ +const data = { + id: 'metrics', + loaded: true, + showHeader: true, + name: '', + panelId: 1244, + groupId: 0, + span: 4, + height: 4, + updateBy: 381, + updateAt: '2021-12-23 03:49:51', + type: 'line', + unit: 2, + weight: 0, + param: { + stack: 0, + showHeader: true, + thresholds: [ + { + color: '#751bd6' + } + ], + thresholdShow: false, + legend: { + values: [ + + ], + show: true, + placement: 'bottom' + }, + enable: { + thresholds: false, + legend: true, + valueMapping: false + }, + nullType: 'null' + }, + pid: null, + buildIn: 0, + remark: '', + seq: null, + x: 0, + y: 12, + elements: [ + { + id: 85583, + chartId: 697389, + expression: '', + type: 'expert', + legend: '', + buildIn: 0, + seq: null, + name: 'A', + state: 1 + } + ], + sync: null, + panel: { + id: 1244, + name: 'testnodata', + createBy: null, + type: null, + link: null, + pid: null, + weight: null, + buildIn: null, + seq: null, + children: null, + parent: null, + chartNum: null + }, + group: { + id: 0, + name: null, + panelId: null, + groupId: null, + span: null, + height: null, + updateBy: null, + updateAt: null, + type: null, + unit: null, + weight: null, + param: null, + pid: null, + buildIn: null, + remark: null, + seq: null, + x: null, + y: null, + elements: null, + sync: null, + panel: null, + group: null, + children: null, + chartNums: null, + asset: null, + varType: null, + varId: null, + varName: null, + datasource: null + }, + children: null, + chartNums: null, + asset: null, + varType: null, + varId: null, + varName: null, + datasource: 'metrics' +} +export default data diff --git a/nezha-fronted/src/components/chart/defaultLogData.js b/nezha-fronted/src/components/chart/defaultLogData.js new file mode 100644 index 000000000..a8cb7b54d --- /dev/null +++ b/nezha-fronted/src/components/chart/defaultLogData.js @@ -0,0 +1,110 @@ +const data = { + id: 'logs', + loaded: true, + showHeader: true, + name: '', + panelId: 1244, + groupId: 0, + span: 4, + height: 4, + updateBy: 381, + updateAt: '2021-12-23 03:49:51', + type: 'line', + unit: 2, + weight: 0, + param: { + stack: 0, + showHeader: true, + thresholds: [ + { + color: '#ea2556' + } + ], + thresholdShow: false, + legend: { + values: [ + + ], + show: true, + placement: 'bottom' + }, + enable: { + thresholds: false, + legend: true, + valueMapping: false + } + }, + pid: null, + buildIn: 0, + remark: '', + seq: null, + x: 0, + y: 12, + elements: [ + { + id: 85584, + chartId: 697389, + expression: '', + type: 'expert', + legend: '', + buildIn: 0, + seq: null, + name: 'A', + state: 1 + } + ], + sync: null, + panel: { + id: 1244, + name: 'testnodata', + createBy: null, + type: null, + link: null, + pid: null, + weight: null, + buildIn: null, + seq: null, + children: null, + parent: null, + chartNum: null + }, + group: { + id: 0, + name: null, + panelId: null, + groupId: null, + span: null, + height: null, + updateBy: null, + updateAt: null, + type: null, + unit: null, + weight: null, + param: null, + pid: null, + buildIn: null, + remark: null, + seq: null, + x: null, + y: null, + elements: null, + sync: null, + panel: null, + group: null, + children: null, + chartNums: null, + asset: null, + varType: null, + varId: null, + varName: null, + datasource: null + }, + children: null, + chartNums: null, + asset: null, + varType: null, + varId: null, + varName: null, + datasource: 'logs' +} +export default data diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue index 46e251500..5c6c62f9e 100644 --- a/nezha-fronted/src/components/chart/panelChart.vue +++ b/nezha-fronted/src/components/chart/panelChart.vue @@ -166,6 +166,9 @@ export default { if (isTimeSeries(this.chartInfo.type)) { query += `&nullType=${this.chartInfo.param.nullType || 'null'}` } + if (element.filter) { + query += `&filter=${element.filter}` + } // if (isChartPie(this.chartInfo.type)) { // query += `&statistics=${this.chartInfo.param.statistics || 'last'}` // } diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue index b7368d9e9..013c340ad 100644 --- a/nezha-fronted/src/components/page/alert/alertMessage.vue +++ b/nezha-fronted/src/components/page/alert/alertMessage.vue @@ -101,37 +101,56 @@
- - -
{{errorContent}}
- - - - - -
- {{$t("project.endpoint.dialogTitle")}} -
- -
-
-
- - -
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { this.currentMsg = { ...row, alertRule: { ...res.data } } - this.graphShow = true + console.log(this.currentMsg ) this.$nextTick(() => { this.searchTimeDialog = [bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000), bus.computeTimezoneTime(new Date().getTime())] this.queryDate() @@ -578,12 +603,15 @@ export default { queryDate () { this.chartLoading = true if (this.currentMsg.alertRule.type === 1) { - this.resultType = 'matrix' - this.$nextTick(() => { - this.queryChartDate() - }) + 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))) + this.showFullscreen(true, chartInfo) } else if (this.currentMsg.alertRule.type === 2) { - this.queryLogData(100) + 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))) + this.showFullscreen(true, chartInfo) } }, queryChartDate () { @@ -1251,6 +1279,10 @@ export default { params.ids = this.batchDeleteObjs.map(item => item.id).join(',') this.exportExcel(this.exportUrl, params, this.exportFileName + '-' + this.getTimeString() + '.xlsx') this.closeDialog() + }, + showFullscreen (show, chartInfo) { + this.chartInfo = chartInfo + this.graphShow = show } }, destroyed () { From 18051f644ddaecd22820c62a675742b63e2869e8 Mon Sep 17 00:00:00 2001 From: zhangyu Date: Thu, 23 Dec 2021 14:15:22 +0800 Subject: [PATCH 6/6] =?UTF-8?q?feat=EF=BC=9Abottom=20alertMessage=20?= =?UTF-8?q?=E6=9B=BF=E6=8D=A2=E5=9B=BE=E8=A1=A8=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/chart/panelChart.vue | 3 + .../bottomBox/tabs/alertMessageTabNew.vue | 108 +++++++---- .../components/page/alert/alertMessage.vue | 178 ------------------ 3 files changed, 73 insertions(+), 216 deletions(-) diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue index 5c6c62f9e..807cd289c 100644 --- a/nezha-fronted/src/components/chart/panelChart.vue +++ b/nezha-fronted/src/components/chart/panelChart.vue @@ -184,6 +184,9 @@ export default { if (isTimeSeries(this.chartInfo.type)) { query += `&nullType=${this.chartInfo.param.nullType || 'null'}` } + if (element.filter) { + query += `&filter=${element.filter}` + } // if (isChartPie(this.chartInfo.type)) { // query += `&statistics=${this.chartInfo.param.statistics || 'last'}` // } diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue index 7bcfdcc82..700297ec3 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue @@ -47,36 +47,56 @@ - - -
{{errorContent}}
- - - - - -
- {{$t("project.endpoint.dialogTitle")}} -
- -
-
-
- - -
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { this.currentMsg = { ...row, alertRule: { ...res.data } } - this.graphShow = true this.$nextTick(() => { this.searchTime = [bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000), bus.computeTimezoneTime(new Date().getTime())] this.queryDate() @@ -683,12 +708,15 @@ export default { queryDate () { this.chartLoading = true if (this.currentMsg.alertRule.type === 1) { - this.resultType = 'matrix' - this.$nextTick(() => { - this.queryChartDate() - }) + 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))) + this.showFullscreen(true, chartInfo) } else if (this.currentMsg.alertRule.type === 2) { - this.queryLogData(1000) + 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))) + this.showFullscreen(true, chartInfo) } }, exportLog ({ limit, descending }) { @@ -841,6 +869,10 @@ export default { showText (row) { this.dialogShowText = true this.dialogText = row.alertRule.trbShot + }, + showFullscreen (show, chartInfo) { + this.chartInfo = chartInfo + this.graphShow = show } } } diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue index 013c340ad..bee157783 100644 --- a/nezha-fronted/src/components/page/alert/alertMessage.vue +++ b/nezha-fronted/src/components/page/alert/alertMessage.vue @@ -120,37 +120,6 @@ @showFullscreen="showFullscreen" > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - { - 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() - this.$refs.messageChart.resize() - }) - } catch (err) { - // this.$message.error(err) - this.$refs.messageChart.endLoading() - this.chartLoading = false - } - }) - } - }, exportLog ({ limit, descending }) { const start = this.searchTimeDialog[0] ? this.searchTimeDialog[0] : bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000) const end = this.searchTimeDialog[1] ? this.searchTimeDialog[1] : bus.computeTimezoneTime(new Date().getTime()) @@ -774,33 +623,6 @@ export default { reader.readAsText(error.response.data) }) }, - queryLogData (limit) { // log的chart和table是一个请求 - if (!limit) { - limit = 100 - } - const start = this.searchTimeDialog[0] ? this.searchTimeDialog[0] : bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000) - const end = this.searchTimeDialog[1] ? this.searchTimeDialog[1] : bus.computeTimezoneTime(new Date().getTime()) - this.expressions = [this.currentMsg.alertRule.expr] - this.$get('/logs/loki/api/v1/query_range?format=1&query=' + encodeURIComponent(this.currentMsg.alertRule.expr) + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&limit=' + limit + '&filter=' + encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels)))).then(res => { - this.chartLoading = false - const logData = [res.data] - this.resultType = res.data.resultType - this.$nextTick(() => { - if (this.$refs.logDetail) { - this.$refs.logDetail.time = this.chartData.param.time - this.$refs.logDetail.wrapLines = this.chartData.param.wrapLines - this.$refs.logDetail.operations.descending = this.chartData.param.descending - } - // logData.forEach((item, index) => { - // item.result.forEach(result => { - // result.elements = this.expressions[index] - // }) - // }) - this.logData = logData - this.resultType === 'matrix' && this.loadLogGraph() - }) - }) - }, loadLogGraph () { const graphData = this.logData.filter(l => l.resultType === 'matrix') if (graphData && graphData.length > 0) {