diff --git a/nezha-fronted/src/components/chart/ChartScreenHeader.vue b/nezha-fronted/src/components/chart/ChartScreenHeader.vue index 66c72218c..1145957b6 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/chartList.vue b/nezha-fronted/src/components/chart/chartList.vue index 11c9dc30c..dd009e8f6 100644 --- a/nezha-fronted/src/components/chart/chartList.vue +++ b/nezha-fronted/src/components/chart/chartList.vue @@ -155,7 +155,6 @@ export default { } if (dom) { this.stepWidth = Math.floor(dom.offsetWidth / 12) - console.log(this.stepWidth) if (!this.isGroup) { const headerH = 50 / this.stepWidth const headerHPadding = 50 / this.stepWidth @@ -217,7 +216,6 @@ export default { }, changeGroupHeight (copyList, group, flag) { const height = getGroupHeight(copyList) - console.log(height,copyList[0].h, group, flag) // console.log(this.$refs.layout) const groupFind = this.copyDataList.find(item => 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 ef4b150c2..53323d747 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 { @@ -14,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 () { @@ -77,8 +81,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,10 +109,13 @@ 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 } + if (alias == 'Previous ') { + alias += legend + } // proj_status_ const name = alias + '-' + dataIndex @@ -113,6 +127,12 @@ export default { return { type, value: getMetricTypeValue(data.values, type) } }) } + if (colorIndex > 20) { + const colorRandom = randomcolor() + 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, @@ -133,6 +153,9 @@ export default { }) return labelValue } else { + if (!aliasExpression) { + return '' + } return aliasExpression } }, 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 f5348bf89..807cd289c 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" @@ -35,7 +41,10 @@ :from="from" :isError="isError" :loading="loading" + :minusTime="minusTime" + :multipleTime="multipleTime" :is-fullscreen="isFullscreen" + :showAllData="showAllData" v-if="!isGroup(chartInfo.type) || !chartInfo.param.collapse" >
@@ -74,7 +83,10 @@ export default { chartData: [], loading: true, isError: false, - MultipleTime: false + multipleTime: false, + minusTime: '', + showAllData: false, + allDataLength: 0 } }, computed: { @@ -87,8 +99,7 @@ export default { }, methods: { isGroup, - dateChange (filter, MultipleTime) { - console.log(filter, MultipleTime) + dateChange (filter, multipleTime) { this.loading = true // TODO assetInfo、endpointInfo、echarts等进行不同的处理 let startTime = filter.start_time @@ -97,6 +108,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 标识是否是刷新操作 @@ -128,6 +147,7 @@ export default { }, query (elements, startTime, endTime, step) { this.isError = false + this.allDataLength = 0 try { switch (this.chartInfo.datasource) { case 'metrics': @@ -138,7 +158,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 } @@ -146,21 +166,61 @@ 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'}` // } query += `&query=${element.expression}` return this.$get(query) }) - + if (this.multipleTime) { + 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 (element.filter) { + query += `&filter=${element.filter}` + } + // if (isChartPie(this.chartInfo.type)) { + // query += `&statistics=${this.chartInfo.param.statistics || 'last'}` + // } + query += `&query=${element.expression}` + return this.$get(query) + }) + requests = requests.concat(multipleRequests) + } 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') { + r.data.result.forEach(item => { + this.allDataLength++ + }) + 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') { + r.data.result.forEach(item => { + this.allDataLength++ + 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 @@ -316,6 +376,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: { @@ -334,6 +409,7 @@ export default { }, mounted () { this.chartInfo.loaded && this.getChartData() + this.showAllData = !this.showMultiple(this.chartInfo.type) } } 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 b7368d9e9..bee157783 100644 --- a/nezha-fronted/src/components/page/alert/alertMessage.vue +++ b/nezha-fronted/src/components/page/alert/alertMessage.vue @@ -101,36 +101,24 @@ - - -
{{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,132 +572,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) - } - }, - queryChartDate () { - const $temp = this - 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.searchTimeDialog = [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(/\"/g, '\'').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() - this.$refs.messageChart.resize() - }) - } catch (err) { - // this.$message.error(err) - this.$refs.messageChart.endLoading() - this.chartLoading = false - } - }) + 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 }) { @@ -746,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) { @@ -1251,6 +1101,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 () { diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue index eb536cc22..59089b87e 100644 --- a/nezha-fronted/src/components/page/dashboard/panel.vue +++ b/nezha-fronted/src/components/page/dashboard/panel.vue @@ -34,11 +34,11 @@
-
- - - -
+ + + + +