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

fix: 修复chart-alertlist报错

Browse Source
This commit is contained in:
chenjinsong
2021-05-21 22:15:40 +08:00
parent 13b0454d00
commit dfd59ad195
7 changed files with 205 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -175,6 +175,7 @@ export default {
},
data () {
return {
currentMsg: null,
tableHeight: 0,
data: {}, // 该图表信息,chartItem
unit: {},
@@ -338,7 +339,7 @@ export default {
const vm = this
this.$chartResizeTool.start(vm, this.data, e)
},
formatThreshold: function (value, unit) {
formatThreshold (value, unit) {
const unitMethod = chartDataFormat.getUnit(unit)
if (unitMethod && value) {
return unitMethod.compute(value, null, 2)
@@ -346,7 +347,7 @@ export default {
return value
}
},
computeDistance: function (str) {
computeDistance (str) {
let width = 0
const html = document.createElement('span')
html.innerText = str
@@ -356,7 +357,7 @@ export default {
document.querySelector('.getTextWidth').remove()
return Number('-' + (width + 5))
},
returnMarkArea: function () {
returnMarkArea () {
if (this.currentMsg) {
if (this.currentMsg.alertRule.operator == '>' || this.currentMsg.alertRule.operator == '>=') {
return [{ yAxis: this.currentMsg.alertRule.threshold }, {}]
@@ -382,7 +383,7 @@ export default {
this.importBox.show = false
this.deleteBox.show = false
},
screenDialogClose: function () {
screenDialogClose () {
this.screenModal = false
this.deleteBox.ids = []
this.$refs.alertListScreenTable.$refs.alertListTable.clearSelection()
@@ -413,7 +414,7 @@ export default {
})
})
},
chartUnitChange: function (unit) {
chartUnitChange (unit) {
this.chartUnit = unit
this.$nextTick(() => {
this.queryChartDate()
@@ -448,7 +449,7 @@ export default {
this.$refs.messageChart.startLoading()
}
const axiosArr = []
const paramStr = JSON.stringify(this.promQueryParamConvert(this.currentMsg))
const paramStr = this.currentMsg ? JSON.stringify(this.promQueryParamConvert(this.currentMsg)) : null
if (paramStr && paramStr.trim() != '""') {
axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + paramStr.substring(1, paramStr.length - 1).replace(/\+/g, '%2B').replace(/ /g, '%20').replace(/\\/g, '') + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step))
this.legend = []
@@ -474,7 +475,7 @@ export default {
symbol: ['circle', 'circle'],
label: {
distance: this.computeDistance(chartDataFormat.getUnit(this.currentMsg.alertRule.unit ? this.currentMsg.alertRule.unit : 2).compute(this.currentMsg.alertRule.threshold)),
formatter: function (params) {
formatter (params) {
return chartDataFormat.getUnit($temp.currentMsg.alertRule.unit ? $temp.currentMsg.alertRule.unit : 2).compute(params.value)
}
},
@@ -537,7 +538,7 @@ export default {
})
}
},
getAlertList: function (filterType, isPreview = false, chartInfo) {
getAlertList (filterType, isPreview = false, chartInfo) {
this.resize()
this.loadingTable = true
this.isPreview = isPreview
@@ -551,6 +552,66 @@ export default {
} else {
chart = Object.assign({}, this.chartInfo)
}
if (chart && chart.param) { // 按照粒度，project>module>endpoint 查询只传最细粒度
const param = chart.param
if (param.endpointId) {
queryParam.endpointIds = param.endpointId
} else {
if (param.moduleId) {
queryParam.moduleIds = param.moduleId
} else {
if (param.projectId) {
queryParam.projectIds = param.projectId
}
}
}
if (param.ruleId) {
queryParam.ruleIds = param.ruleId
}
if (param.severity) {
queryParam.severityIds = param.severity
}
if (param.state) {
queryParam.state = param.state
}
}
if (this.searchLabel.orderBy) {
queryParam.orderBy = this.searchLabel.orderBy
}
// this.startLoading(filterType);
this.$get('/alert/message', queryParam).then(response => {
if (response.code === 200) {
this.storedTableData = response.data.list
this.storedScreanTableData = response.data.list
this.pageObj.total = response.data.total
this.isError = false
this.errorContent = ''
this.divFirstShow = true
this.firstShow = true // 展示操作按键
this.loadingTable = false
this.endLoading(filterType)
} else {
this.isError = true
this.errorContent = response.msg
}
})
},
getAlerScreetList (filterType, isPreview = false, chartInfo) {
this.resize()
this.loadingTable = true
this.isPreview = isPreview
const queryParam = {
pageSize: this.screenPageObj.pageSize,
pageNo: this.screenPageObj.pageNo
}
let chart
if (chartInfo) {
chart = Object.assign({}, chartInfo)
} else {
chart = Object.assign({}, this.chartInfo)
}
if (chart && chart.param) { // 按照粒度，project>module>endpoint 查询只传最细粒度
const param = chart.param
if (param.endpointId && param.endpointId != '') {
@@ -566,70 +627,10 @@ export default {
}
if (param.ruleId && param.ruleId != '') {
queryParam.ruleId = param.ruleId
queryParam.ruleIds = param.ruleId
}
if (param.severity && param.severity != '') {
queryParam.severity = param.severity
}
if (param.state && param.state != '') {
queryParam.state = param.state
}
}
if (this.searchLabel.orderBy) {
queryParam.orderBy = this.searchLabel.orderBy
}
// this.startLoading(filterType);
this.$get('/alert/message', queryParam).then(response => {
if (response.code == 200) {
this.storedTableData = response.data.list
this.storedScreanTableData = response.data.list
this.pageObj.total = response.data.total
this.isError = false
this.errorContent = ''
this.divFirstShow = true
this.firstShow = true // 展示操作按键
this.loadingTable = false
this.endLoading(filterType)
} else {
this.isError = true
this.errorContent = response.msg
}
})
},
getAlerScreetList: function (filterType, isPreview = false, chartInfo) {
this.resize()
this.loadingTable = true
this.isPreview = isPreview
const queryParam = {
pageSize: this.screenPageObj.pageSize,
pageNo: this.screenPageObj.pageNo
}
let chart
if (chartInfo) {
chart = Object.assign({}, chartInfo)
} else {
chart = Object.assign({}, this.chartInfo)
}
if (chart && chart.param) { // 按照粒度，project>module>endpoint 查询只传最细粒度
const param = chart.param
if (param.endpointId && param.endpointId != '') {
queryParam.endpointId = param.endpointId
} else {
if (param.moduleId && param.moduleId != '') {
queryParam.moduleId = param.moduleId
} else {
if (param.projectId && param.projectId != '') {
queryParam.projectId = param.projectId
}
}
}
if (param.ruleId && param.ruleId != '') {
queryParam.ruleId = param.ruleId
}
if (param.severity && param.severity != '') {
queryParam.severity = param.severity
queryParam.severityIds = param.severity
}
if (param.state && param.state != '') {
queryParam.state = param.state
@@ -647,7 +648,7 @@ export default {
this.$nextTick(() => {
this.storedScreanTableData.forEach((item) => {
item.labels = JSON.parse(item.labels)
if (item.alertRule.buildIn != 1) {
if (item.alertRule.buildIn !== 1) {
const paramStr = JSON.stringify(this.promQueryParamConvert(item))
axiosAll.push(axios.get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length - 1).replace(/\+/g, '%2B').replace(/ /g, '%20').replace(/\\/g, '')))
} else {

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

@@ -145,8 +145,8 @@
:chart-index="index"
></text-chart>
<chart-alert-list :from="from" :ref="'editChart'+item.id"
:panel-id="filter.panelId"
<chart-alert-list :ref="'editChart'+item.id" :chartData="item"
:from="from"
:chart-index="index"
v-if="item.type === 'alertList'"
:editChartId="'editChartId' + item.id"
@@ -158,9 +158,9 @@
@on-duplicate-chart-block="duplicateChart"
@on-drag-chart="editChartForDrag"
@on-edit-chart-block="editData"
@sync="()=>{chartBySync(item)}"
:panel-id="filter.panelId"
@dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
:chartData="item"
@sync="()=>{chartBySync(item)}"
></chart-alert-list>
<chart-pie :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'pie'" :temp-dom="tempDom"
@@ -240,7 +240,6 @@ export default {
props: {
fromRoute,
isModel: { type: Boolean, default: false },
additionalInfo: {},
draggable: { type: Boolean, default: true },
from: { type: String },
obj: Object,
@@ -631,12 +630,13 @@ export default {
}
if (!param.query) delete param.query
// 根据panelId获得panel下的所有图表
this.$get('visual/panel/chart?panelId=' + params.panelId + '&groupId=0' + '&pageSize=-1').then(response => {
const groupId = this.from === fromRoute.panel ? '&groupId=0' : ''
this.$get('visual/panel/chart?panelId=' + params.panelId + groupId + '&pageSize=-1').then(response => {
if (response.code === 200) {
response.data.list.forEach((item, index) => {
item.isLoaded = false
})
// response.data.list = response.data.list.filter((item) => item.groupId === -1 || !item.groupId) // 处理外层存在的groupItem
// chart数据存在dataTotalListBak中
if (response.data.list) {
this.dataTotalListBak = response.data.list
} else {
@@ -645,7 +645,7 @@ export default {
let chartListTmp = []
// 查询条件带name
if (this.filter.searchName && this.filter.searchName != '') {
if (this.filter.searchName) {
const searchTitleStr = this.filter.searchName
this.dataTotalListBak.forEach((item) => {
if (item.name.indexOf(searchTitleStr) > -1) {
@@ -766,7 +766,7 @@ export default {
this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
this.filter.panelId, this.filter, '', errorMsg)
}
} else if (chartItem.type == 'text') {
} else if (chartItem.type === 'text') {
if (filterType === 'showFullScreen') { // 全屏查询
this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
panelId, filter, null, filterType)
@@ -789,7 +789,7 @@ export default {
return
}
if (chartItem.type === 'assetInfo') {
if (chartItem.from != fromRoute.endpoint) {
if (chartItem.from !== fromRoute.endpoint) {
this.$set(chartItem, 'draggable', true)
this.$set(chartItem, 'resizable', true)
}
@@ -800,7 +800,7 @@ export default {
this.getEndpointInfoChartData(chartItem)
return
}
if (chartItem.type == 'projectInfo') {
if (chartItem.type === 'projectInfo') {
chartItem.name = this.$t('project.chart.projectInfo')
this.getProjectInfoChartData(chartItem)
return
@@ -1350,7 +1350,7 @@ export default {
chartInfo.name = this.$t('asset.assetInfo')
const detail = []
if (!this.isModel) {
const assetId = this.additionalInfo.assetId ? this.additionalInfo.assetId : this.additionalInfo.id
const assetId = this.obj.assetId ? this.obj.assetId : this.obj.id
const arr = []
arr.push(this.$get(`/asset/asset/${assetId}`))
arr.push(this.$get(`/asset/asset/feature/${assetId}`))
@@ -1448,8 +1448,8 @@ export default {
const detail = []
if (!this.isModel) {
this.$refs['editChart' + chartInfo.id][0].showLoad(chartInfo)
this.$get('/project/info?id=' + this.additionalInfo.id).then(response => {
if (response.code == 200) {
this.$get('/project/info?id=' + this.obj.id).then(response => {
if (response.code === 200) {
response.data && (function () {
response.data.basic && detail.push({
title: vm.$t('project.chart.basicTitle'),
@@ -1516,16 +1516,16 @@ export default {
}
},
getAlertListChartData (chartInfo, filterType) {
if (this.additionalInfo) {
this.$set(chartInfo, 'param', { endpointId: this.additionalInfo.id })
if (this.obj) {
this.$set(chartInfo, 'param', { endpointId: this.obj.id })
}
this.$refs['editChart' + chartInfo.id][0].getAlertList(filterType)
this.$refs['editChart' + chartInfo.id][0].getAlertList(null, null, chartInfo)
},
getAlertRuleChartData (chartInfo) {
const vm = this
const detail = []
const req = new Promise((resolve, reject) => {
this.$get('alert/rule/stat?id=' + this.additionalInfo.id).then(response => {
this.$get('alert/rule/stat?id=' + this.obj.id).then(response => {
if (response.code == 200) {
response.data && (function () {
if (response.data.project && response.data.project.length > 0) {

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

@@ -88,7 +88,7 @@
<div class="table-list" id="tableList">
<div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
<div class="box-content">
<chart-list :additional-info="obj" :draggable="draggable" :from="from" :is-model="from === fromRoute.model" :obj="obj" @on-edit-chart="editChart"
<chart-list :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-add-group-item-chart="addGroupItem"></chart-list>
</div>
@@ -254,7 +254,7 @@ export default {
if (refresh) {
this.refresh()
if (this.from === fromRoute.chartTemp) {
this.$get('/visual/panel/chart', { ids: this.obj.id, groupId: 0 }).then(res => {
this.$get('/visual/panel/chart', { ids: this.obj.id }).then(res => {
res.data.list.forEach(item => {
if (!item.children) {
item.children = []
@@ -375,7 +375,7 @@ export default {
} else {
if (this.from === this.fromRoute.chartTemp) {
if (this.obj.type === 'group') {
this.$get('/visual/panel/chart', { ids: this.obj.id, groupId: 0 }).then(res => {
this.$get('/visual/panel/chart', { ids: this.obj.id }).then(res => {
res.data.list.forEach(item => {
if (!item.children) {
item.children = []

115
nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
View File

@@ -1,21 +1,18 @@
<template>
<div v-clickoutside="{obj: editAlertRule, func: clickOutside}" class="right-box right-box-alert-config">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns right-box-form-delete">
<button v-if="alertRule.id" id="alert-box-del" v-has="'rule_delete'" class="nz-btn nz-btn-size-normal nz-btn-size-alien" type="button" @click="del">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
</div>
<!-- end--顶部按钮-->
<div class="right-box__header">
<!-- begin--标题-->
<div class="right-box-title">{{editAlertRule.id ? $t("alert.config.editAlertConfig") : $t("alert.config.createAlertConfig")}}</div>
<div class="header__title">{{alertRule.id ? $t("alert.config.editAlertConfig") : $t("alert.config.createAlertConfig")}}</div>
<!-- end--标题-->
<div class="header__operation">
<span v-cancel="{obj: editAlertRule, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
</div>
</div>
<!-- begin--表单-->
<div class="right-box-form-box">
<el-form ref="alertRuleForm" :model="editAlertRule" :rules="rules" class="right-box-form right-box-form-left" label-position = "top" label-width="120px" style="width:100%">
<div class="right-box__container">
<div class="container__form">
<el-form ref="alertRuleForm" :model="editAlertRule" :rules="rules" label-position = "top" label-width="120px">
<!--name-->
<el-form-item :label='$t("alert.config.name")' prop="name">
<el-input id="alert-box-input-name" v-model="editAlertRule.name" maxlength="64" placeholder="" show-word-limit size="small"></el-input>
@@ -35,7 +32,7 @@
<!--threshold-->
<el-form-item :label="$t('alert.config.threshold')" prop="threshold" style="display: inline-block;">
<el-input id="alert-box-input-threshold" v-model="editAlertRule.threshold" placeholder="" size="small" type="text">
<el-select id="alert-box-input-operator" slot="prepend" v-model="editAlertRule.operator" class="input-with-select" placeholder="" popper-class="config-dropdown threshold-dropdown" size="small">
<el-select id="alert-box-input-operator" slot="prepend" v-model="editAlertRule.operator" class="hide-icon" popper-class="right-box-select-dropdown prevent-clickoutside" size="small">
<el-option v-for="item in operators" :id="'operator-'+item.key" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-input>
@@ -57,25 +54,26 @@
</el-input>
</el-form-item>
<!--severity-->
<el-form-item :label="$t('alert.severity')" prop="severity" class="severity-box">
<el-select id="alert-box-input-severity" v-model="editAlertRule.severityId" placeholder="" popper-class="config-dropdown severity-box" size="small">
<el-form-item :label="$t('alert.severity')" class="severity-box" prop="severity">
<el-select id="alert-box-input-severity" v-model="editAlertRule.severityId" class="right-box__select" placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small">
<el-option v-for="item in severityData" :id="'alert-severity-'+item.value" :key="item.id" :label="item.name" :value="item.id">
<span>
<i class="nz-icon nz-icon-circle" :style="{color:item.color,'font-size':'12px'}"></i> {{item.name}}
<i :style="{color:item.color,'font-size':'12px'}" class="nz-icon nz-icon-circle"></i> {{item.name}}
</span>
</el-option>
</el-select>
<i class="nz-icon nz-icon-circle severity-circle" v-if="editAlertRule.severityId" :style="{color:severityData.find(severity => severity.id === editAlertRule.severityId).color,'font-size':'12px'}"></i>
<i v-if="editAlertRule.severityId" :style="{color:severityData.find(severity => severity.id === editAlertRule.severityId).color,'font-size':'12px'}" class="nz-icon nz-icon-circle severity-circle"></i>
</el-form-item>
<!--receiver-->
<el-form-item :label="$t('config.user.receiver')" prop="receiver">
<el-select
id="alert-box-input-receiver"
v-model.trim="editAlertRule.receiverShow"
class="right-box__select"
filterable
multiple
placeholder=""
popper-class="no-style-class"
popper-class="right-box-select-dropdown prevent-clickoutside"
size="small"
value-key="userId"
@change="receiverShowChange"
@@ -89,8 +87,8 @@
</el-select>
</el-form-item>
<!--notify-->
<el-form-item :label="$t('alert.notify')" prop="method" class="notify-box" :rules="[{ validator: validateNotify, trigger: 'change'},]">
<el-select id="alert-box-input-notify" v-model="editAlertRule.method" placeholder="" popper-class="config-dropdown notify-box" size="small" multiple>
<el-form-item :label="$t('alert.notify')" :rules="[{ validator: validateNotify, trigger: 'change'},]" class="notify-box" prop="method">
<el-select id="alert-box-input-notify" v-model="editAlertRule.method" class="right-box__select" multiple placeholder="" popper-class="right-box-select-dropdown prevent-clickoutside" size="small">
<el-option v-for="item in notifyData" :id="'alert-severity-'+item.value" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
@@ -105,6 +103,7 @@
</el-form-item>
</el-form>
</div>
</div>
<!-- end--表单-->
<!--底部按钮-->
@@ -331,79 +330,7 @@ export default {
}
</script>
<style>
.unit-popper-class{
z-index: 2052 !important;
}
.input-with-select{
width: 70px !important;
}
.input-with-select #alert-box-input-operator{
padding: 0;
text-align: center;
border-top:1px solid #d0d4dC;
border-bottom:1px solid #d0d4dC;
border-radius: 4px 0 0 4px;
}
.input-with-select #alert-box-input-operator + .el-input__suffix{
.hide-icon .el-input__suffix {
display: none;
}
</style>
<style scoped>
.rule-severity-remark{
display: inline-flex;
justify-content: left;
justify-items: center;
align-items: center;
width: calc(100% - 46px);
padding: 10px 15px;
background: #F6F6F6;
color: #999999;
margin-top: -13px;
margin-bottom: 18px;
margin-left: 15px;
font-size: 14px;
}
.rule-severity-remark .nz-icon-info-normal{
margin-right: 10px;
}
/deep/ .metric-selector-title{
margin-left: 0 !important;
}
/* 标题样式 */
.right-box-title{
font-size: 16px;
font-weight: 700;
height: 60px;
line-height: 60px;
padding: 0 0 0 20px;
border-bottom:1px solid #E7EAED ;
box-sizing: border-box;
}
/* 表单 */
.el-form-item {
margin-left: 0 !important;
width: 100% !important;
padding: 0 30px;
box-sizing: border-box;
}
.el-form-item__lable{
font-family: Roboto-Medium;
font-weight: 500;
}
.rule-severity-remark{
width: 640px;
box-sizing: border-box;
margin: -13px 30px 18px 30px;
}
.severity-circle{
position: absolute;
left: 10px;
top: 0;
}
.severity-box{
position: relative;
}
.severity-box /deep/ .el-select .el-input__inner{
padding-left: 25px;
}
}
</style>

10
nezha-fronted/src/components/common/rightBox/moduleBox.vue
View File

@@ -302,7 +302,8 @@ export default {
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
port: [
{ validator: port, trigger: 'blur' }
{ validator: port, trigger: 'blur' },
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
username: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
@@ -444,13 +445,8 @@ export default {
return
}
this.editModule.type = type
if (type == 'http') {
this.editModule.port = 9100
} else {
this.$nextTick(() => {
if (type !== 'http') {
this.$refs.selectWalk.show()
})
this.editModule.port = 161
}
},
/* 保存 */

6
nezha-fronted/src/components/page/config/system.vue
View File

@@ -170,8 +170,8 @@
<el-form-item :label="$t('config.system.ldap.dn')" prop="ldap_dn">
<el-input v-model="ldap.ldap_dn" id="system-ldap-ldap_dn"></el-input>
</el-form-item>
<el-form-item :label="$t('config.system.ldap.pin')" prop="ldap_pin">
<el-input v-model="ldap.ldap_pin" type="password" id="system-ldap-ldap_pin"></el-input>
<el-form-item :label="$t('config.system.ldap.pin')" prop="ldap_password">
<el-input id="system-ldap-ldap_password" v-model="ldap.ldap_password" type="password"></el-input>
</el-form-item>
<el-form-item :label="$t('config.system.ldap.ou')" class="has-tip" prop="ldap_ou">
<el-input v-model="ldap.ldap_ou" id="system-ldap-ldap_ou"></el-input>
@@ -331,7 +331,7 @@ export default {
ldap: {
ldap_address: '',
ldap_dn: '',
ldap_pin: '',
ldap_password: '',
ldap_ou: '',
ldap_user_filter: '',
ldap_mapping: '',

4
nezha-fronted/src/components/page/monitor/module/moduleList.vue
View File

@@ -89,7 +89,7 @@ export default {
name: '',
endpointNameTmpl: '{{module.name}}-{{asset.name}}',
type: 'http',
port: 9100,
port: '',
chartIds: '',
configs: {
walk: [],
@@ -150,7 +150,7 @@ export default {
this.object = JSON.parse(JSON.stringify(res.data))
this.object.configs = JSON.parse(this.object.configs)
this.object.walk = this.object.configs.walk ? JSON.parse(JSON.stringify(this.object.configs.walk)) : []
this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : 9100
this.object.port = this.object.configs.port ? JSON.parse(JSON.stringify(this.object.configs.port)) : ''
this.object.paramObj = []
this.object.labelModule = []
if (JSON.stringify(this.object.configs.labels) !== '{}' && this.object.configs.labels) {