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

NEZ-601 perf: endpoint-detail和add-chart-by-template

Browse Source
This commit is contained in:
chenjinsong
2021-05-20 16:27:46 +08:00
parent 9488eef644
commit 9ff0686fc8
8 changed files with 79 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
nezha-fronted/src/components/charts/chart-detail.vue
View File

@@ -27,7 +27,7 @@
<div ref="scrollbar" style="height: 100%;width:100%; overflow: auto;"> <div ref="scrollbar" style="height: 100%;width:100%; overflow: auto;">
<div v-for="(item, index) in detail" :key="index" class="chart-sub"> <div v-for="(item, index) in detail" :key="index" class="chart-sub">
<div class="chart-sub-title" @click="hideElement(index)"> <div class="chart-sub-title" @click="hideElement(index)">
<span><i :class="{'nz-icon nz-icon-caret-right': show.indexOf(index) == -1,'nz-icon nz-icon-caret-bottom': show.indexOf(index) > -1}"></i></span> <span><i :class="{'nz-icon nz-icon-caret-right': show.indexOf(index) === -1,'nz-icon nz-icon-caret-bottom': show.indexOf(index) > -1}"></i></span>
<span>{{item.title}}</span> <span>{{item.title}}</span>
</div> </div>
<el-collapse-transition> <el-collapse-transition>
@@ -35,18 +35,18 @@
<template v-for="(value, key, i) in item.data"> <template v-for="(value, key, i) in item.data">
<!-- endpoint-detail、asset、model的assetInfo的asset详情--> <!-- endpoint-detail、asset、model的assetInfo的asset详情-->
<div v-if="(data.from == $CONSTANTS.fromRoute.endpoint || data.from == $CONSTANTS.fromRoute.asset || data.from == $CONSTANTS.fromRoute.model) && data.type == 'assetInfo' && item.type == 'basic' && assetKey[key]" :key="i" class="content-item"> <div v-if="(data.from === fromRoute.endpoint || data.from === fromRoute.asset || data.from === fromRoute.model) && data.type === 'assetInfo' && item.type === 'basic' && assetKey[key]" :key="i" class="content-item">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`"> <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span class="content-text">{{assetKey[key]}}</span> <span class="content-text">{{assetKey[key]}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{assetKey[key]}}</div> <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{assetKey[key]}}</div>
</div> </div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`"> <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
<span v-if="key == 'state'"> <span v-if="key === 'state'">
{{value}} {{value}}
</span> </span>
<span v-else-if="key == 'alert'" class="as-button" :class="{'success': value <= 0, 'danger': value > 0}">{{value + ' ' + $t('overall.active')}}</span> <span v-else-if="key === 'alert'" :class="{'success': value <= 0, 'danger': value > 0}" class="as-button">{{value + ' ' + $t('overall.active')}}</span>
<div v-else-if="key == 'tags'" class="no-overflow" style="padding-bottom: 5px;"> <div v-else-if="key === 'tags'" class="no-overflow" style="padding-bottom: 5px;">
<template v-if="value && value.length > 0"> <template v-if="value && value.length > 0">
<nz-alert-tag :label="tagItem.name" type="normal" style="margin: 5px 5px 0 0; vertical-align: middle;" <nz-alert-tag :label="tagItem.name" type="normal" style="margin: 5px 5px 0 0; vertical-align: middle;"
:cursor-point="false" :cursor-point="false"
@@ -59,12 +59,12 @@
</template> </template>
<template v-else>&nbsp;</template> <template v-else>&nbsp;</template>
</div> </div>
<template v-else-if="key == 'cabinet'"> <template v-else-if="key === 'cabinet'">
<span v-if="value&&item.data.cabinetStart&&item.data.cabinetEnd">{{value + '['+item.data.cabinetStart+'-'+item.data.cabinetEnd+']'}}</span> <span v-if="value&&item.data.cabinetStart&&item.data.cabinetEnd">{{value + '['+item.data.cabinetStart+'-'+item.data.cabinetEnd+']'}}</span>
<span v-else-if="value&&!(item.data.cabinetStart||item.data.cabinetEnd)">{{value}}</span> <span v-else-if="value&&!(item.data.cabinetStart||item.data.cabinetEnd)">{{value}}</span>
<span v-else></span> <span v-else></span>
</template> </template>
<template v-else-if="key == 'pingRtt'"> <template v-else-if="key === 'pingRtt'">
<div class="active-icon" :class="{'green-bg': item.data.pingStatus == 1, 'red-bg': item.data.pingStatus == 1 != 1}"></div> <div class="active-icon" :class="{'green-bg': item.data.pingStatus == 1, 'red-bg': item.data.pingStatus == 1 != 1}"></div>
<span>{{value ? value + 'ms' : ''}}</span> <span>{{value ? value + 'ms' : ''}}</span>
</template> </template>
@@ -76,7 +76,7 @@
</div> </div>
</div> </div>
<!-- endpoint-detail、asset、model的assetInfo的feature--> <!-- endpoint-detail、asset、model的assetInfo的feature-->
<div v-if="(data.from === $CONSTANTS.fromRoute.endpoint || data.from === $CONSTANTS.fromRoute.asset || data.from == $CONSTANTS.fromRoute.model) && data.type == 'assetInfo' && item.type == 'attribute'" :key="i" class="content-item"> <div v-if="(data.from === fromRoute.endpoint || data.from === fromRoute.asset || data.from === fromRoute.model) && data.type === 'assetInfo' && item.type === 'attribute'" :key="i" class="content-item">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`"> <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span class="content-text">{{key}}</span> <span class="content-text">{{key}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div> <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
@@ -120,33 +120,19 @@
</div> </div>
<!-- endpoint-detail的endpointInfo的endpoint详情--> <!-- endpoint-detail的endpointInfo的endpoint详情-->
<div v-else-if="data.from === $CONSTANTS.fromRoute.endpoint && data.type == 'endpointInfo' && endpointKey[key]" :key="i" class="content-item"> <div v-else-if="data.from === fromRoute.endpoint && data.type === 'endpointInfo'" :key="i" class="content-item">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`"> <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span class="content-text">{{endpointKey[key]}}</span> <span class="content-text">{{endpointKey[key]}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{endpointKey[key]}}</div> <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{endpointKey[key]}}</div>
</div> </div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`"> <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
<template v-if="key == 'state'"><div id="littleChart" style="cursor: pointer; height: 26px; width: 100px;" @click="preview"></div></template> <span class="content-text">{{value || value === 0 ? value : "&nbsp;"}}</span>
<template v-else-if="endpointKey[key]">
<span class="content-text">{{value ? value : "&nbsp;"}}</span>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
</template>
</div>
</div>
<!-- endpoint-detail的endpointInfo的alert详情-->
<div v-else-if="data.from == $CONSTANTS.fromRoute.endpoint && data.type == 'endpointInfo' && item.title == $t('overall.alert')" :key="i" class="content-item">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span class="content-text">{{key}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
</div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`">
<span class="content-text">{{value ? value : "&nbsp;"}}</span>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div> <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
</div> </div>
</div> </div>
<!-- alertRule-detail的详情--> <!-- alertRule-detail的详情-->
<div v-else-if="data.from == $CONSTANTS.fromRoute.rule && data.type == 'alertRuleInfo' && key != '_module_'" :key="i" class="content-item" @click="showDeep(`deep-${index}-${i}`)"> <div v-else-if="data.from == fromRoute.rule && data.type == 'alertRuleInfo' && key != '_module_'" :key="i" class="content-item" @click="showDeep(`deep-${index}-${i}`)">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`"> <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span class="content-text"> <span class="content-text">
<span><i v-if="item.data._module_[key]" :class="{'nz-icon nz-icon-caret-right': deepShow.indexOf(`deep-${index}-${i}`) == -1,'nz-icon nz-icon-caret-bottom': deepShow.indexOf(`deep-${index}-${i}`) > -1}"></i></span> <span><i v-if="item.data._module_[key]" :class="{'nz-icon nz-icon-caret-right': deepShow.indexOf(`deep-${index}-${i}`) == -1,'nz-icon nz-icon-caret-bottom': deepShow.indexOf(`deep-${index}-${i}`) > -1}"></i></span>
@@ -217,7 +203,7 @@ import chartPreview from './chartPreview'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import nzAlertTag from '../page/alert/nzAlertTag' import nzAlertTag from '../page/alert/nzAlertTag'
import bus from '../../libs/bus' import bus from '../../libs/bus'
import { fromRoute } from '@/components/common/js/constants'
export default { export default {
name: 'chartDetail', name: 'chartDetail',
components: { components: {
@@ -243,6 +229,7 @@ export default {
}, },
data () { data () {
return { return {
fromRoute,
ready: false, ready: false,
data: {}, // 该图表信息,chartItem data: {}, // 该图表信息,chartItem
detail: [], // 展示的详情 detail: [], // 展示的详情
@@ -303,13 +290,12 @@ export default {
}, },
endpointKey: { endpointKey: {
id: 'ID', id: 'ID',
host: this.$t('project.endpoint.host'), name: this.$t('overall.name'),
port: this.$t('project.endpoint.port'), type: this.$t('overall.type'),
path: this.$t('project.endpoint.path'), project: this.$t('overall.project'),
param: this.$t('project.endpoint.param'), module: this.$t('project.module.module'),
state: this.$t('alert.list.state'), alerts: this.$t('project.endpoint.alerts'),
project: this.$t('project.project.projectName'), state: this.$t('project.endpoint.state')
module: this.$t('project.module.module')
} }
} }
}, },
@@ -424,11 +410,12 @@ export default {
this.panelIdInner = panelId this.panelIdInner = panelId
this.data = chartItem this.data = chartItem
this.detail = detail this.detail = detail
if (this.detail[0] && this.detail[0].type && this.detail[0].type == 'endpointInfo') { // endpointInfo的小图表 console.info(this.data, this.detail)
/* if (this.detail[0] && this.detail[0].type && this.detail[0].type == 'endpointInfo') { // endpointInfo的小图表
this.$nextTick(() => { this.$nextTick(() => {
this.initChart(this.detail[0].data.stateSeries) this.initChart(this.detail[0].data.stateSeries)
}) })
} } */
this.endLoading() this.endLoading()
}, },
initChart (series) { initChart (series) {

163
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -228,11 +228,12 @@ import { chartResizeTool } from '@/components/common/js/tools'
export default { export default {
name: 'chartList', name: 'chartList',
props: { props: {
fromRoute,
isModel: { type: Boolean, default: false }, isModel: { type: Boolean, default: false },
additionalInfo: {}, additionalInfo: {},
draggable: { type: Boolean, default: true }, draggable: { type: Boolean, default: true },
detail: Object,
from: { type: String }, from: { type: String },
obj: Object,
panelLock: { type: Boolean, default: false }, panelLock: { type: Boolean, default: false },
hasGroup: { type: Boolean, default: true }, hasGroup: { type: Boolean, default: true },
panelDataList: Array panelDataList: Array
@@ -552,7 +553,7 @@ export default {
from: params.from from: params.from
} }
// alert-rule单独处理 // alert-rule单独处理
if (param.from == fromRoute.alertRule) { if (param.from === fromRoute.alertRule) {
this.dataList = [] this.dataList = []
this.dataList.push({ this.dataList.push({
id: -10, id: -10,
@@ -581,7 +582,7 @@ export default {
buildIn: 1, buildIn: 1,
elements: [{ elements: [{
id: '', id: '',
expression: `nz_alert_nums{id="${this.detail.id}"}`, expression: `nz_alert_nums{id="${this.obj.id}"}`,
type: '' type: ''
}] }]
}) })
@@ -600,68 +601,6 @@ export default {
}) })
return return
} }
// endpoint单独处理
if (param.from == fromRoute.endpoint) {
this.dataList = []
// this.dataList.push({
// id: -8,
// panelId: 0,
// title: this.$t("alert.alertList"),
// span: 8,
// height: 700,
// type: "alertList",
// prev: -9,
// next: -1,
// buildIn: 1,
// draggable: false,
// resizable: false,
// editable: false,
// });
this.dataList.push({
id: -10,
panelId: 0,
dataId: this.additionalInfo.id,
title: this.$t('project.chart.endpointInfo'),
span: 6,
height: 4,
type: 'endpointInfo',
prev: 0,
next: -9,
buildIn: 1,
elements: [{
expression: `up{endpoint="${this.additionalInfo.id}"}`
}],
draggable: false,
resizable: false,
editable: false
})
this.dataList.push({
id: -9,
panelId: 0,
title: this.$t('asset.assetInfo'),
span: 6,
height: 4,
type: 'assetInfo',
prev: -10,
next: -8,
buildIn: 1,
draggable: false,
resizable: false,
editable: false
})
this.$nextTick(() => {
this.dataList.forEach((item, index) => {
this.$set(item, 'from', params.from)
this.setChartSize(item, index)// 设置该图表宽度
const chartBox = document.getElementById('chart-' + item.id)
this.handleElementInViewport(chartBox, 0, item, index)
if (item.type === 'group') {
this.$refs['editChart' + item.id][0].$refs.listGroup.getData(params)
}
})
})
return
}
if (param.from == fromRoute.chartTemp) { // 模板列表 if (param.from == fromRoute.chartTemp) { // 模板列表
this.panelDataList[0].children.forEach((item1, i) => { this.panelDataList[0].children.forEach((item1, i) => {
item1.chartIndex = i item1.chartIndex = i
@@ -894,7 +833,7 @@ export default {
this.modelStaticData(chartInfo, filterType) this.modelStaticData(chartInfo, filterType)
} else { } else {
// 没有数据的设置提示信息暂无数据-针对每一个图 // 没有数据的设置提示信息暂无数据-针对每一个图
const len = chartItem.elements.length const len = chartItem.elements ? chartItem.elements.length : 0
if (len === 0) { if (len === 0) {
this.$nextTick(() => { this.$nextTick(() => {
if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) { if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
@@ -1389,82 +1328,24 @@ export default {
const detail = [] const detail = []
this.$refs['editChart' + chartInfo.id][0].showLoad() this.$refs['editChart' + chartInfo.id][0].showLoad()
chartInfo.name = this.$t('project.chart.endpointInfo') chartInfo.name = this.$t('project.chart.endpointInfo')
chartInfo.from = fromRoute.endpoint
const basicInfo = JSON.parse(JSON.stringify(this.detail)) const basicInfo = JSON.parse(JSON.stringify(this.obj))
const basicInfoReq = new Promise((resolve, reject) => { detail.push(
const now = new Date() {
const startTime = bus.timeFormate(new Date(now).setHours(now.getHours() - 1), 'yyyy-MM-dd hh:mm:ss') data: {
const endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss') id: basicInfo.id,
// const step = bus.getStep(startTime, endTime) name: basicInfo.name,
this.$nextTick(() => { type: basicInfo.module.type,
let query = chartInfo.elements[0].expression project: basicInfo.project.name,
if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea') && chartInfo.param) { module: basicInfo.module.name,
chartInfo.param.nullType = chartInfo.param.nullType || 'null' alerts: basicInfo.alertNum,
query += '&nullType=' + chartInfo.param.nullType state: basicInfo.state === 1 ? 'up' : 'down'
}
this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=5m').then(response => {
if (response.status === 'success') {
if (response.data.result) {
const series = {
name: '',
symbol: 'emptyCircle', // 去掉点
symbolSize: 4,
smooth: 0.2, // 曲线变平滑
showSymbol: false,
data: [],
type: 'line',
lineStyle: {
width: 1,
opacity: 0.9
}, },
itemStyle: { type: 'endpointInfo',
color (params) { title: this.$t('project.chart.basicTitle')
if (params.data[1] == '1') {
return '#50d050'
} else {
return '#d64f40'
} }
} )
}
}
response.data.result.forEach((queryItem, resInnerPos) => {
// 将秒改为毫秒
series.data = queryItem.values.map((dpsItem, dpsIndex) => {
return [dpsItem[0] * 1000, dpsItem[1]]
})
})
basicInfo.stateSeries = [series]
basicInfo.state = ''
resolve({ title: this.$t('project.chart.basicTitle'), data: basicInfo, type: 'endpointInfo' })
}
}
})
})
})
const endpointId = this.additionalInfo.id
const alertMsg = new Promise((resolve, reject) => {
this.$get('/alert/message?endpointId=' + endpointId + '&state=1&pageSize=-1').then(response => {
if (response.code == 200) {
const alerts = {}
if (response.data) {
response.data.list.forEach(t => {
const alertRule = t.alertRule.alertName
if (alerts[alertRule]) {
alerts[alertRule]++
} else {
alerts[alertRule] = 1
}
})
}
resolve({ title: this.$t('overall.alert'), data: alerts })
}
})
})
Promise.all([basicInfoReq, alertMsg]).then(resolves => {
resolves.forEach(t => detail.push(t))
this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail) this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, detail)
})
}, },
getAssetInfoChartData (chartInfo) { getAssetInfoChartData (chartInfo) {
const vm = this const vm = this
@@ -1830,7 +1711,9 @@ export default {
}, },
resize () { resize () {
this.init() this.init()
this.$parent.dateChange() this.$nextTick(() => {
this.$parent.$parent.dateChange()
})
}, },
init () { init () {
this.stepWidth = this.chartResizeTool.stepWidth(document.getElementById('listContainer').offsetWidth - 14) this.stepWidth = this.chartResizeTool.stepWidth(document.getElementById('listContainer').offsetWidth - 14)

14
nezha-fronted/src/components/common/bottomBox/bottomBox.vue
View File

@@ -25,12 +25,6 @@
<alert-message-tab v-if="((from === fromRoute.alertRule || from === fromRoute.asset || from === fromRoute.endpoint || from === fromRoute.project ) && targetTab === 'alertMessage')" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab"></alert-message-tab> <alert-message-tab v-if="((from === fromRoute.alertRule || from === fromRoute.asset || from === fromRoute.endpoint || from === fromRoute.project ) && targetTab === 'alertMessage')" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab"></alert-message-tab>
<!--asset页的endpoint列表--> <!--asset页的endpoint列表-->
<endpoint-tab v-if="from === fromRoute.asset && targetTab === fromRoute.endpoint" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-tab> <endpoint-tab v-if="from === fromRoute.asset && targetTab === fromRoute.endpoint" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-tab>
<!--endpoint-query-->
<!-- <endpoint-query-tab v-if="(from === fromRoute.endpoint && targetTab === 'endpointQuery')" v-show="subResizeShow" ref="endpointQuery" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-query-tab>-->
<!-- model-panel/asset-detail/project-overview的panel-->
<!-- <panel-tab v-if="(from === fromRoute.model || from === fromRoute.asset || from === fromRoute.project || from === fromRoute.rule || from === fromRoute.endpoint) && targetTab === 'panel'" v-show="subResizeShow" ref="panelTab" :detail="detail" :from="from"-->
<!-- :obj="obj" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab>-->
<!--terminal-log的记录和回放--> <!--terminal-log的记录和回放-->
<terminal-log-cmd-tab v-if="from === fromRoute.terminalLog && targetTab === 'cmdTab'" :from="from" :obj="obj" :tabs="tabs.terminalLog.cmd" @changeTab="changeTab"></terminal-log-cmd-tab> <terminal-log-cmd-tab v-if="from === fromRoute.terminalLog && targetTab === 'cmdTab'" :from="from" :obj="obj" :tabs="tabs.terminalLog.cmd" @changeTab="changeTab"></terminal-log-cmd-tab>
@@ -49,13 +43,13 @@
<!--module列表的tab--> <!--module列表的tab-->
<endpointTabNew v-if="from === fromRoute.module && targetTab === 'endpoint'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab="targetTab" @changeTab="changeTab"></endpointTabNew> <endpointTabNew v-if="from === fromRoute.module && targetTab === 'endpoint'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab="targetTab" @changeTab="changeTab"></endpointTabNew>
<alertMessageTabNew v-if="from === fromRoute.module && targetTab === 'moduleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew> <alertMessageTabNew v-if="from === fromRoute.module && targetTab === 'moduleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
<panel-tab-new v-if="from === fromRoute.module && targetTab === 'panel'" v-show="subResizeShow" :detail="detail" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new> <panel-tab-new v-if="from === fromRoute.module && targetTab === 'panel'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
<!--endpoint列表的tab--> <!--endpoint列表的tab-->
<panel-tab-new v-if="from === fromRoute.endpoint && targetTab === 'panelTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new> <panel-tab-new v-if="from === fromRoute.endpoint && targetTab === 'panelTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
<endpointQuery v-if="from === fromRoute.endpoint && targetTab === 'endpointQuery'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></endpointQuery> <endpointQuery v-if="from === fromRoute.endpoint && targetTab === 'endpointQuery'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></endpointQuery>
<alertMessageTabNew v-if="from === fromRoute.endpoint && targetTab === 'endpointAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew> <alertMessageTabNew v-if="from === fromRoute.endpoint && targetTab === 'endpointAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
<!--chartTemp的Tab--> <!--chartTemp的Tab-->
<panel-tab-new v-if="from === fromRoute.chartTemp && targetTab === 'panel'" v-show="subResizeShow" :detail="detail" :from="from" :tabs="tabs.chartTemp.chartTempTabTitle" :obj="obj" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new> <panel-tab-new v-if="from === fromRoute.chartTemp && targetTab === 'panel'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.chartTemp.chartTempTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
<!--alertRule Tab--> <!--alertRule Tab-->
<alertMessageTabNew v-if="from === fromRoute.alertRule && targetTab === 'alertRuleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertRule.alertRule" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew> <alertMessageTabNew v-if="from === fromRoute.alertRule && targetTab === 'alertRuleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertRule.alertRule" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
<!--model 下滑--> <!--model 下滑-->
@@ -105,10 +99,6 @@ export default {
from: String, // 来自哪个页面 from: String, // 来自哪个页面
tabList: Array, // 动态页签列表 tabList: Array, // 动态页签列表
targetTab: String, // 展示哪个页签 targetTab: String, // 展示哪个页签
detail: Object, // 对象详情内容
detailList: Array, // 多个对象详情内容
assetDetail: Object // endpoint页的asset详情
}, },
data () { data () {
return { return {

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

@@ -292,7 +292,7 @@ export default {
cancelButtonText: this.$t('tip.no'), cancelButtonText: this.$t('tip.no'),
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.$delete(this.url + '?ids=' + row.id + '&state=3').then(response => { this.$delete(this.url + '?ids=' + row.id + '&state=' + this.state).then(response => {
if (response.code === 200) { if (response.code === 200) {
self.delFlag = true self.delFlag = true
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') }) this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })

5
nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
View File

@@ -83,7 +83,7 @@
<div class="table-list" id="tableList"> <div class="table-list" id="tableList">
<div ref="dashboardScrollbar" style="height: 100%; overflow: auto;"> <div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
<div class="box-content"> <div class="box-content">
<chart-list :additional-info="obj" :detail="detail" :draggable="draggable" :from="from" :is-model="from == $CONSTANTS.fromRoute.model" @on-edit-chart="editChart" <chart-list :additional-info="obj" :draggable="draggable" :from="from" :is-model="from === fromRoute.model" :obj="obj" @on-edit-chart="editChart"
@on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock" :panel-data-list="panelDataList" @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock" :panel-data-list="panelDataList"
@on-add-group-item-chart="addGroupItem"></chart-list> @on-add-group-item-chart="addGroupItem"></chart-list>
</div> </div>
@@ -117,8 +117,7 @@ export default {
props: { props: {
from: String, from: String,
obj: Object, obj: Object,
draggable: { type: Boolean, default: true }, draggable: { type: Boolean, default: true }
detail: Object
}, },
data () { data () {
return { return {

2
nezha-fronted/src/components/common/language/en.js
View File

@@ -1222,7 +1222,7 @@ const en = {
list: 'List', list: 'List',
delete: 'Delete', delete: 'Delete',
save: 'Save', save: 'Save',
info: 'Info', info: 'Info'
} }
}, },
project: { project: {

12
nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
View File

@@ -13,7 +13,7 @@
border border
@header-dragend="dragend" @header-dragend="dragend"
@sort-change="tableDataSort" @sort-change="tableDataSort"
@selection-change="selectChange" @selection-change="selectionChange"
> >
<el-table-column <el-table-column
:resizable="false" :resizable="false"
@@ -488,14 +488,8 @@ export default {
toDeleteMessage (obj) { toDeleteMessage (obj) {
this.$emit('toDelete', obj) this.$emit('toDelete', obj)
}, },
selectChange (s) { selectionChange (objs) {
const ids = [] this.$emit('selectionChange', objs)
this.deleteBox.ids = ''
s.forEach(item => {
ids.push(item.id)
})
this.deleteBox.ids = ids.join(',')
this.$emit('select-change', s)
}, },
closeDialog () { closeDialog () {
this.importBox.show = false this.importBox.show = false

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

@@ -22,7 +22,7 @@
type="button" @click="showExportDialog"> type="button" @click="showExportDialog">
<i class="nz-icon-download1 nz-icon"></i> <i class="nz-icon-download1 nz-icon"></i>
</button> </button>
<delete-button id="alert-msg-batch-delete" v-has="'message_delete'" :api="url" :clickFunction="openDelMessageBox" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button> <delete-button id="alert-msg-batch-delete" v-has="'alertMessage_expired'" :api="url" :clickFunction="batchDel" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
</template> </template>
<template v-slot:default="slotProps"> <template v-slot:default="slotProps">
<alert-message-table <alert-message-table
@@ -227,18 +227,34 @@ export default {
this.queryChartDate() this.queryChartDate()
}) })
}, },
del (row) { batchDel () {
const self = this
this.$confirm(this.$t('tip.confirmDelete'), { this.$confirm(this.$t('tip.confirmDelete'), {
confirmButtonText: this.$t('tip.yes'), confirmButtonText: this.$t('tip.yes'),
cancelButtonText: this.$t('tip.no'), cancelButtonText: this.$t('tip.no'),
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.$delete(this.url + '?ids=' + row.id + '&state=3').then(response => { this.$delete(this.url + '?ids=' + this.batchDeleteObjs.map(m => m.id).join(',') + '&state=' + this.state).then(response => {
if (response.code === 200) { if (response.code === 200) {
self.delFlag = true this.delFlag = true
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') }) this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
self.getTableData() this.getTableData()
} else {
this.$message.error(response.msg)
}
})
})
},
del (row) {
this.$confirm(this.$t('tip.confirmDelete'), {
confirmButtonText: this.$t('tip.yes'),
cancelButtonText: this.$t('tip.no'),
type: 'warning'
}).then(() => {
this.$delete(this.url + '?ids=' + row.id + '&state=' + this.state).then(response => {
if (response.code === 200) {
this.delFlag = true
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
this.getTableData()
} else { } else {
this.$message.error(response.msg) this.$message.error(response.msg)
} }
@@ -468,34 +484,6 @@ export default {
openedDialog () { openedDialog () {
this.$refs.remarkForm.clearValidate() this.$refs.remarkForm.clearValidate()
}, },
openDelMessageBox () {
if (this.batchDeleteObjs.length < 1) return
if (this.$refs.dataTable) {
this.$refs.dataTable.toDeleteMessage(false)
}
},
toDeleteMessage (obj) {
if (obj) {
this.deleteBox.ids = obj.id + ''
}
this.deleteBox.show = true
},
deleteMessage () {
this.$refs.remarkForm.validate(valid => {
if (valid) {
this.$put(this.url, this.deleteBox).then(res => {
if (res.code === 200) {
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
this.deleteBox.ids = []
this.deleteBox.show = false
this.getTableData()
} else {
this.$message.error(res.msg)
}
})
}
})
},
showExportDialog () { showExportDialog () {
this.importBox.show = true this.importBox.show = true
}, },