gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix： 修改 仪表盘 不显示的问题，以及 endpointQuery的全屏的新增

Browse Source
This commit is contained in:
zhangyu
2021-12-23 15:44:27 +08:00
parent e4fbdcb395
commit e68546dc54
11 changed files with 173 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
nezha-fronted/src/components/chart/ChartScreenHeader.vue
View File

@@ -34,7 +34,19 @@
</el-tooltip>
</span>
<span class="chart-header__tool" v-if="showTime(chartInfo.type)">
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" :showMultiple="showMultiple(chartInfo.type)" ref="pickTime" style="height: 28px;" id="line-chart"></pick-time>
<pick-time
:refresh-data-func="dateChange"
v-model="searchTime"
:use-chart-unit="showUnit(from)"
:showMultiple="showMultiple(chartInfo.type)"
ref="pickTime"
style="height: 28px;"
id="line-chart"
@unitChange="unitChange"
></pick-time>
</span>
<span class="chart-header__tool" v-if="showSaveBtn(from)">
<button id="endpoint-query-full-chart-save" v-has="'panel_chart_add'" class="nz-btn nz-btn-size-large nz-btn-style-normal" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>
</span>
<span class="chart-header__tool" @click="closeDialog">
<i class="nz-icon nz-icon-close" style="font-size: 16px;"></i>
@@ -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: {

2
nezha-fronted/src/components/chart/chart/chartGauge.vue
View File

@@ -3,7 +3,7 @@
<div
v-for="(item,index) in gaugeData" :key="index"
class="chart-gauge-item"
:id="this.isFullscreen?('chart-gauge-screen-' + chartInfo.id + '-' + index):('chart-gauge-' + chartInfo.id + '-' + index)"
:id="isFullscreen?('chart-gauge-screen-' + chartInfo.id + '-' + index):('chart-gauge-' + chartInfo.id + '-' + index)"
:style="{height:item.height+'px',width:item.width + 'px'}"
>
<!-- :style="{background:item.mapping ? item.mapping.color.bac : false,height:item.height+'px',width:item.width + 'px'}"-->

3
nezha-fronted/src/components/chart/chartHeaderMixin.js
View File

@@ -64,6 +64,9 @@ export default {
},
loadMore () {
this.$emit('loadMore')
},
unitChange (val) {
this.$emit('unitChange', val)
}
},
watch: {

7
nezha-fronted/src/components/chart/defaultLineData.js
View File

@@ -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
}

6
nezha-fronted/src/components/chart/defaultLogData.js
View File

@@ -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
}

15
nezha-fronted/src/components/chart/panelChart.vue
View File

@@ -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: {

122
nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
View File

@@ -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)
}
},

3
nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
View File

@@ -37,7 +37,8 @@
<div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light" style="height: 28px;">
<button class="nz-btn nz-btn-size-normal nz-btn-style-light" :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}" @click="viewGraph">
<i class="nz-icon nz-icon-chart" :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i>
</button><button @click="dropdownHandler(dropdownShow)" class="nz-btn nz-btn-size-normal nz-btn-style-light export-dropdown-btn" id="browser-go">
</button>
<button @click="dropdownHandler(dropdownShow)" class="nz-btn nz-btn-size-normal nz-btn-style-light export-dropdown-btn" id="browser-go">
<i class="nz-icon nz-icon-arrow-down"></i>
<transition name="el-zoom-in-top">
<div v-if="dropdownShow" class="endpoint-query-dropdown el-popover" style="right: 11px;top: 33px;">

9
nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
View File

@@ -1,7 +1,7 @@
<template>
<div v-clickoutside="{obj:editChart, func:clickOutside}" :class="boxClass" class="right-box right-box-chart">
<transition v-if="from !== 'chartTemp'" name="right-box">
<panel-box v-if="!showPanel.type" ref="panelBox2" :panel="panel" @reload="panelReload"></panel-box>
<!-- <panel-box v-if="!showPanel.type" ref="panelBox2" :panel="panel" @reload="panelReload"></panel-box>-->
</transition>
<div class="right-box__header">
@@ -182,6 +182,10 @@ export default {
params.x = 0
params.y = 999
}
if (this.from === 'endpointQuery') { // endpointQuery 新增 放在最后
params.x = 0
params.y = 999
}
delete params.panel
if (params.type === 'table') {
delete params.param.tags
@@ -212,6 +216,7 @@ export default {
})
},
selectPanel (panel) {
console.log(panel)
this.panelName = panel.name
this.editChart.panelName = panel.name
this.panelId = panel.id
@@ -356,7 +361,7 @@ export default {
immediate: true,
deep: true,
handler () {
if (this.showPanel.id || this.from === 'chartTemp') {
if (this.showPanel && (this.showPanel.id || this.from === 'chartTemp')) {
this.panelId = this.showPanel.id
this.panelName = this.showPanel.name
this.editChart.panelName = this.showPanel.name

298
nezha-fronted/src/components/common/table/special/endpointQueryTab.vue
View File

@@ -51,43 +51,96 @@
<div class="query-page-option">
<Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
</div>
<el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
:title="$t('project.endpoint.dialogTitle')"
:visible.sync="graphShow"
width="90%"
height="80%"
:modal-append-to-body="false"
<el-dialog
id="viewGraphDialog"
@close="dialogClose">
<div slot="title">
{{$t("project.endpoint.dialogTitle")}}
<div class="float-right panel-calendar dialog-tool" style="display: flex;margin-right: 30px">
<pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange" id="endpoint-query-full-chart" :show-multiple="true" ref="pickTime"></pick-time>
<button id="endpoint-query-full-chart-save" v-has="'panel_chart_add'" class="nz-btn nz-btn-size-large nz-btn-style-normal" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>
</div>
</div>
<chart ref="endpointChart" :unit="chartUnit" :minusTime="minusTime" v-if="graphShow"></chart>
v-if="graphShow"
:visible.sync="graphShow"
:show-close="false"
class="nz-dialog chart-fullscreen"
destroy-on-close
fullscreen
:modal-append-to-body="false"
>
<panel-chart
:ref="'chart-fullscreen' + chartInfo.id"
:chart-info="chartInfo"
:from="fromRoute.endpointQuery"
:filter="{}"
:is-fullscreen="true"
@saveChart="saveChart"
:time-range="searchTime"
@showFullscreen="showFullscreen"
></panel-chart>
</el-dialog>
<!-- <el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"-->
<!-- :title="$t('project.endpoint.dialogTitle')"-->
<!-- :visible.sync="graphShow"-->
<!-- width="90%"-->
<!-- height="80%"-->
<!-- :modal-append-to-body="false"-->
<!-- id="viewGraphDialog"-->
<!-- @close="dialogClose">-->
<!-- <div slot="title">-->
<!-- {{$t("project.endpoint.dialogTitle")}}-->
<!-- <div class="float-right panel-calendar dialog-tool" style="display: flex;margin-right: 30px">-->
<!-- <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange" id="endpoint-query-full-chart" :show-multiple="true" ref="pickTime"></pick-time>-->
<!-- <button id="endpoint-query-full-chart-save" v-has="'panel_chart_add'" class="nz-btn nz-btn-size-large nz-btn-style-normal" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>-->
<!-- </div>-->
<!-- </div>-->
<!-- <chart ref="endpointChart" :unit="chartUnit" :minusTime="minusTime" v-if="graphShow"></chart>-->
<!-- </el-dialog>-->
<transition name="right-box">
<chart-box :chart="chart" :panel-data="panelData" :show-panel="{id: -1, name: '', type: 'endpointQuery'}" @close="rightBox.show = false" @on-create-success="createSuccess" @reload="getPanelData" @reloadOnlyPanel="getPanelData" box-class="save-chart-box" from="project_endpoint_query" ref="addChartModal" v-if="rightBox.show" style="z-index: 2900" :fromEndpoint="true"></chart-box>
</transition>
<transition name="right-box">
<!-- <chart-box-->
<!-- v-if="rightBox.chart.show"-->
<!-- ref="addChartModal"-->
<!-- :chart="chart"-->
<!-- :from="fromRoute.panel"-->
<!-- :panel-data="panelData"-->
<!-- :show-panel="showPanel"-->
<!-- @close="closeChartBox"-->
<!-- @reload="panelReload"-->
<!-- @reloadOnlyPanel="panelReloadOnlyPanel"-->
<!-- @delete-chart="delChart"-->
<!-- @on-create-success="createSuccess"-->
<!-- @on-delete-success="delChartOk"-->
<!-- ></chart-box>-->
<chart-right-box
v-if="chartRightBoxShow"
v-loading="rightBox.loading"
ref="addChartModal"
:chart="chart"
:showPanel="{}"
:from="fromRoute.panel"
:panel-data="panelData"
@close="closeChartBox"
@on-create-success="createSuccess"
></chart-right-box>
</transition>
</div>
</template>
<script>
import chartBox from '@/components/page/dashboard/chartBox'
import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
import axios from 'axios'
import bus from '../../../../libs/bus'
import chart from '@/components/page/dashboard/overview/chart'
import { sameLabels } from '@/components/common/js/constants'
import { sameLabels, fromRoute } from '@/components/common/js/constants'
import metaData from '@/components/common/metaData'
import panelChart from '@/components/chart/panelChart'
import lodash from 'lodash'
import lineData from '@/components/chart/defaultLineData'
export default {
name: 'endpointQueryTab',
components: {
chartBox,
chart,
metaData
metaData,
panelChart,
chartRightBox
},
props: {
from: {},
@@ -131,6 +184,7 @@ export default {
},
data () {
return {
fromRoute,
tableData: [],
currentTableData: [],
batchDeleteObjs: [],
@@ -333,187 +387,30 @@ export default {
if (this.batchDeleteObjs.length < 1) {
return
}
this.chartDatas = []
this.legend = []
this.$refs.pickTime.$refs.multipleTime.searchTime = []
this.$refs.pickTime.$refs.multipleTime.showTime = {
id: 12,
text: this.$t('dashboard.panel.noDate')
}
this.$refs.pickTime.$refs.multipleTime.showDropdown = false
this.graphShow = true
this.$nextTick(() => {
this.$refs.endpointChart.startLoading()
this.queryChartDate()
})
},
chartUnitChange (unit) {
this.chartUnit = unit
this.$nextTick(() => {
this.queryChartDate()
})
},
queryChartDate () {
const start = this.searchTime[0] ? this.searchTime[0] : this.getTime(-1, 'h')
const end = this.searchTime[1] ? this.searchTime[1] : this.getTime(0, 'h')
this.searchTime = [start, end]
const timeDiff = (new Date(end).getTime() - new Date(start).getTime()) / 1000 / (24 * 60 * 60)
// end - start < 1 day : 15s
// end - start < 7 day : 5m
// end - start < 30 day : 10m
// end - start > 30 day : 30m
let step = '15s'
if (timeDiff < 1) {
step = '15s'
} else if (timeDiff < 7) {
step = '5m'
} else if (timeDiff < 30) {
step = '10m'
} else {
step = '30m'
}
const axiosArr = []
const chartInfo = lodash.cloneDeep(lineData)
const elements = lodash.cloneDeep(chartInfo.elements[0])
chartInfo.elements = []
chartInfo.name = this.$t('project.endpoint.dialogTitle')
for (const endpoint of this.batchDeleteObjs) {
axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + encodeURIComponent(endpoint.element) + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step))
const element = lodash.cloneDeep(elements)
element.expression = endpoint.element
chartInfo.elements.push(element)
}
if (this.$refs.pickTime && this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length) { // 判断是否需要添加比较
const startTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
const endTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
for (const endpoint of this.batchDeleteObjs) {
axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + encodeURIComponent(endpoint.element) + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step))
}
}
this.legend = []
this.chartDatas = []
axios.all(axiosArr).then(res => {
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,
lineStyle: {
width: 1,
opacity: 0.9
}
}
chartData.name = queryData.metric.__name__
let alias = queryData.metric.__name__
delete queryData.metric.__name__
chartData.name += '{'
alias += '{'
Object.keys(queryData.metric).forEach((item, index) => {
const label = item
const value = queryData.metric[label]
chartData.name += label + "='" + value + "',"
if (!this.sameLabels.some((i) => { return i == label })) {
alias += label + "='" + value + "',"
}
})
chartData.name = chartData.name.charAt(chartData.name.length - 1) === ',' ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name
alias = alias.charAt(alias.length - 1) === ',' ? alias.substr(0, alias.length - 1) : alias
chartData.name += '}'
alias += '}'
if (!/.+\{.+\}/.test(alias)) {
alias = alias.substr(0, alias.length - 2)
}
const legend = {
name: chartData.name,
alias: alias,
// showText:this.formatLegend(chartData.name),
isGray: false
}
if (promIndex >= this.batchDeleteObjs.length) {
legend.name = 'Previous ' + legend.name
chartData.name = legend.name
legend.alias = 'Previous ' + legend.alias
}
this.legend.push(legend)
chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
return [dpsItem[0] * 1000, Number(dpsItem[1])]
})
this.chartDatas.push(chartData)
}
} else {
this.$message.error(response.data.error)
console.error(response.data)
}
}
})
if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length && res.length > this.batchDeleteObjs.length) {
const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime())
this.minusTime = minusTime
let cutPoint = 0
res.forEach((item, index) => {
if (index < res.length / 2) {
cutPoint += res[index].data.data.result.length
}
})
this.chartDatas.forEach((item, index) => {
if (index >= cutPoint) {
this.chartDatas[index].data.forEach((item1, index1) => {
item1[0] = item1[0] + minusTime
})
}
})
}
this.$nextTick(() => {
if (this.$refs.endpointChart) {
this.$refs.endpointChart.setRandomColors(this.chartDatas.length)
this.$refs.endpointChart.setLegend(this.legend)
this.$refs.endpointChart.modifyOption('tooltip', 'backgroundColor', 'rgba(221,228,237,1)')
this.$refs.endpointChart.modifyOption('tooltip', 'textStyle', { color: '#000' })
this.$refs.endpointChart.modifyOption('grid', 'top', 30)
this.$refs.endpointChart.modifyOption('grid', 'left', 0)
this.$refs.endpointChart.modifyOption('grid', 'right', 30)
this.$refs.endpointChart.modifyOption('grid', 'bottom', 8)
this.$refs.endpointChart.modifyOption('grid', 'containLabel', true)
this.$refs.endpointChart.setSeries(this.chartDatas)
this.$refs.endpointChart.endLoading()
}
setTimeout(() => {
// this.$refs.endpointChart.resize()
}, 100)
})
this.showFullscreen(true, chartInfo)
})
},
dialogClose () {
this.$refs.pickTime.$refs.multipleTime.searchTime = []
this.$refs.pickTime.$refs.multipleTime.showTime = {
id: 12,
text: this.$t('dashboard.panel.noDate')
}
this.$refs.pickTime.$refs.multipleTime.showDropdown = false
this.chartUnit = 5
this.graphShow = false
},
saveChart () { // 新增chart
saveChart (chart) { // 新增chart
this.getPanelData().then(() => {
const chart = {
title: '',
type: 'line',
span: 12,
height: '400',
unit: this.chartUnit,
param: {
url: '',
threshold: ''
},
elements: [],
panel: '',
sync: 0
}
for (let i = 0; i < this.batchDeleteObjs.length; i++) {
if (this.batchDeleteObjs[i] && this.batchDeleteObjs[i].element !== '') {
chart.elements.push({ chartId: '', expression: this.batchDeleteObjs[i].element, type: 'expert' })
}
}
chart.id = ''
chart.name = ''
chart.panelName = ''
this.chart = chart
this.rightBox.show = true
this.graphShow = false
this.$store.dispatch('dispatchEditChart', {
chart: this.chart,
type: 'add'
})
})
},
createSuccess (type, response, param, panel) {
@@ -555,9 +452,24 @@ export default {
this.metaDataList = res.data[data.metricTip.metric]
}
})
}
},
showFullscreen (show, chartInfo) {
this.chartInfo = chartInfo
this.graphShow = show
},
closeChartBox (refresh) {
// this.rightBox.chart.show = false
this.chart = {}
this.$store.dispatch('clearPanel')
/* if (refresh) {
this.getData(this.filter)
} */
},
},
computed: {
chartRightBoxShow () {
return this.$store.getters.getShowRightBox
},
},
created () {
// this.getPanelData()

3
nezha-fronted/src/components/page/alert/alertMessage.vue
View File

@@ -556,7 +556,6 @@ export default {
}
this.$get('/alert/rule/' + row.alertRule.id).then(res => {
this.currentMsg = { ...row, alertRule: { ...res.data } }
console.log(this.currentMsg )
this.$nextTick(() => {
this.searchTimeDialog = [bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000), bus.computeTimezoneTime(new Date().getTime())]
this.queryDate()
@@ -575,11 +574,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)
}
},